Vue实例的生命周期

什么是生命周期

从实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期

主要的生命周期函数分类

//  代码示例
<div id="app">
        {{mag}}
     <button @click="mag='No'">改变数据</button>
</div>
//
const App = new Vue({
    el: "#app",
    data: {
        mag: 'yes'
    },
    methods: {
        fn() {
            console.log("哈桑");
        }
    },
})

1. 创建期间的生命周期函数

1. beforeCreate:实例刚在内存中被创建出来，此时，还没初始化好data和methods属性
beforeCreate() {
    // 这是我们遇到的第一个生命周期函数,此时data和methods还没初始化好
    console.log(this.mag);//undefined
    this.fu(); ///this.fu is not a function
}
2. created:实例已经在内存创建ok，此时，data和methods属性已经创建ok，但是还没有开始编译模板
created() {
    // 这是我们遇到的第二个生命周期函数
    // 此时data和methods都已经初始化好了
    console.log(this.mag);//yes
    this.fn()//哈桑
}
3. beforeMount:此时已经完成模板编译，但是还没挂载到页面中
beforeMount() {
    // 这是遇到的第3个生命周期函数
    // 此时模板在内存中已经编译好了，但是还没渲染到页面上
    // 在beforeMount执行时，页面中的元素还没真正被替换，只是之前写的一些模板字符
    console.log(document.querySelector("#app").innerText);//{{mag}}
    console.log(this.mag);//yes
}
4. mounted:此时，已经将编译好的模板，挂载到页面指定的容器中显示
mounted() {
    // 这是遇第4个生命周期函数
    // 此时，内存中的模板，已经真是挂载到了页面中，用户已经可以看到渲染好的页面
    // mounted是实例创建阶段的最后一个生命周期函数，当执行完mounted 就表示，实例已经被完全创建好了，此时，如果没有其它操作的话，这个实例，就静静的躺在我们的内存中，一动不动
    console.log(document.querySelector("#app").innerText);//yes
    console.log(this.mag);//yes
}

2. 运行期间的生命周期函数

1. beforeUpdate:状态更新之前执行此函数，此时data中的状态值是最新的，但是页面上显示的数据还是旧的，因为此时还没有开始重新渲染Dom节点
 beforeUpdate() {
    // 当执行beforeUpdate的时候，DOM的数据还是旧的，此时data数据是最新的，DOM尚未和最新的数据保持同步
    console.log(this.mag);//No
    console.log(document.querySelector("#app").innerText); //yes
}

2. updated:实例更新完毕之后调用此函数，此时data和页面上显示的数据都已经更新完毕，页面被重新渲染
updated() {
    // 当执行updated的时候，DOM的数据和data数据都是最新的，DOM和最新的数据已经保持同步
    console.log(this.mag);//No
    console.log(document.querySelector("#app").innerText); //No
},

3. 销毁期间的生命周期函数

/* 
当执行beforeDestroy钩子函数的时候，Vue实例就已经从运行阶段，进入到了销毁阶段;
当执行 beforeDestroy的时候，实例身上所有的data和所有的methods .以及过滤器、指令…....都处于可用状态，
此时，还没有真正执行销毁的过程
 */
1. beforeDestroy:实例销毁之前调用，在这一步，实例仍然完全可用

/* 
当执行到destroyed函数的时候，组件已经被完全销毁了，此时，组件中所有的数据、方法、指令、过波器..….热已经不可用了 
*/
2. destroyed:vue实例销毁后调用，调用后，vue实例指示的所有东西都会解绑，所有的事件监听都会被移除，所有的子实例也会被销毁

图