生命周期函数---组件创建期间的四种钩子函数

什么是Vue实例的生命周期：从Vue实例创建，运行，到销毁期间，总是会伴随着各种各样的事件，这些事件统称为生命周期
生命周期钩子：就是生命周期事件的别名而已
主要的生命周期函数分类：
1，创建期间的生命周期函数：
beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好data,methods属性
created：实例已经在内存中创建好，此时data和methods已经创建好，此时还没有开始编译模板
beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中
mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示
2.运行期间的生命周期函数
beforeUpdate：状态更新之前执行此函数，此时data中的数据是最新的，但是界面上显示的还是旧的，因为此时还没有开始更新渲染DOM节点
updated：实例更新完毕后调用此函数，此时data中的状态值和界面上显示的数据都已经被重新渲染好了
3.销毁期间的生命周期函数
beforeDestory：实例销毁之前调用，在这一步，实例仍然完全可用
destroyed：Vue实例销毁后调用，调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器都会被移除，所有的子实例也会被销毁
1.1 beforeCreate()
这是我们遇到的第一个生命周期函数，表示在实例完全被创建出来会执行它，注意，在beforeCreate方法执行的时候，data和methods中的数据还未被初始化

 beforeCreate(){
    //  console.log(this.msg);
    //  this.show();
     },

1.2 created()，在created中 data和methods中的数据被初始化好了，如果要调用methods中的方法或者操作data中的数据最早只能在created中进行

     created(){
        //  console.log(this.msg);
        //  this.show();
      
     },

1.3 beforeMount()，这是我们遇到的第三个生命周期函数，表示模板已经在内存中完成了编译，但尚未把模板渲染到页面中去，在beforeMount执行的时候，页面中的元素尚未被真正替换过来，只是之前写的一些模板字符串

 beforeMount(){ 
 //console.log(document.getElementById('h3').innerText);
 },

1.4 mounted：这是遇到的第四个生命周期函数，表示内存中的模板已经被真实的挂载在页面中去了，用户可以看到已经被渲染好了页面了，注意 mounted是实例创建的最后一个生命周期，当执行mounted 就表示实例已经被创建好了，此时没有其他的操作的话，这个实例就静静的躺在内存中，一动也不动。

 mounted(){
    console.log(document.getElementById('h3').innerText);
   
 },

接下来是运行中的两个事件
2.1 beforeUpdate：这时候表示页面未被更新，但是数据肯定已经被更新了，得出结论：在执行beforeupdate的时候，页面上的数据还是旧的，data中的数据已经更新为最新的，此时页面上的数据和最新数据不能保持同步。

 beforeUpdate(){ 
    // console.log('界面上的数据是：'+document.getElementById('h3').innerText);
    // console.log('data中的msg是：'+this.msg)
 },

2.2 updated：在执行updated的函数后，页面中的数据和data中的数据已经保持同步了，都是最新的

updated(){
    console.log('界面上的数据是：'+document.getElementById('h3').innerText);
    console.log('data中的msg是：'+this.msg);
 }

当执行beforeDestory钩子函数时，Vue实例已经从运行阶段进入了销毁阶段，这是vue实例中的data，methods，过滤器，指令…
还处于可用状态，此时还没有真正执行销毁过程。
当执行到destoryed函数时，Vue实例已经被完全销毁，这是所有的数据，方法，过滤器，指令…都处于不可用状态

生命周期函数---组件创建期间的四种钩子函数

猜你喜欢