Vue:生命周期（从出生到销毁）

一、什么是生命周期

人有自己的生命，生物也有自己生命，万物都有自己的生命，而我们的Vue实例对象也是有自己的的生命的。生命周期指的就是Vue 实例从创建到销毁的过程。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。

注意：
1.生命周期又名：生命周期回调函数、生命周期函数、生命周期钩子
2.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
3.生命周期函数中的this指向是vm 或组件实例对象。

二、生命周期的作用

生命周期中有很多事件钩子，可以让我们控制整个Vue实例的过程时更容易形成好的逻辑。

三、生命周期的三个阶段（挂载、更新、销毁）

1.挂载阶段

（1） 初始化：生命周期、事件，但数据代理未开始 ==> beforeCreate

此时，无法通过vm访问到data中的数据、methods中的方法。
比如说：我们先创建一个一个Vue实例对象

 const vm = new Vue({
            el: "#root",
            data: {
                n: 1,
            },
 })

在beforeCreate里设置一个断点debugger，我们来看看能不能打印出 n 的值

beforeCreate() {
                console.log('beforeCreate',this.n);
                debugger; 
            },

显而易见，无法访问访问到data中的数据

（2）初始化：数据监测、数据代理 ==> created

此时,可以通过vm访问到data中的数据、methods中配置的方法。
让我们来对比一下beforeCreate和created

 beforeCreate() {
                console.log('beforeCreate',this.n);
                // debugger;
                
 },
 created() {
       console.log('created',this.n);
       debugger;
 },

结果显而易见，在created函数里我们可以看见data中的n值·

（3）解析模版,生成虚拟DOM==>beforeMount

此时，页面呈现的是未经Vue编译的DOM结构，所有对DOM的操作最终都不奏效,因为都会被后续的页面渲染给覆盖掉。
那么，接下来我们验证一下。

<div id="root">
        <h2>当前的n值是:{{n}}</h2>
        <button @click="n++">点我n+1</button>
    </div>

我们在这个阶段用dom来操作h2的值

 beforeMount() {
                console.log('beforeMount');
                document.querySelector('h2').innerHTML = 'DOM操作不奏效'
                debugger
            },

在断点时，我们可以发现确实是改变了，但当我们继续运行后就发现。

这个DOM操作就失效了。那是因为在这时页面上呈现的都是未经Vue编译的DOM结构，后面的DOM就会被Vue重新渲染，所以此时最好不要进行DOM操作，因为，压根不会是实现啊！

（4）将内存中的虚拟DOM转化为真实DOM插入页面 ==>mounted

此时，页面呈现的是经过Vue编译的DOM结构，所有对DOM的操作均奏效，可以在此阶段进行一些初始化操作.
验证一下：

mounted() {
          console.log('mounted');
          document.querySelector('h2').innerHTML = 'DOM操作奏效'
},

没有问题确实奏效。好了以上就是生命周期的挂载阶段。

2.更新阶段

数据发生改变 ==>beforeUpdate ==> 生成新的虚拟与旧的进行比较，完成页面更新 ==> update

(1) beforeUpdate 在页面数据更新前

此时数据是新的，页面是旧的。即:页面尚未与数据保持同步

beforeUpdate() {
                console.log("beforeUpdate",this.n);
                debugger
},

此时，不难发现在这时，数据虽然发生改变，但并没有渲染到页面上。

(2) updated 在页面数据更新后

此时数据是新的，页面是新的。即:页面与数据保持同步

 updated() {
                console.log('updated'); 
                debugger
 },

此时，页面与数据已经开始保持同步。

3.销毁阶段

（1）beforeDestroy （销毁前）

看了什么几个大家应该都懂了，这个阶段就是处在销毁之前，也就是像人的弥留之际一样，所有的功能依旧完好，一般是用来做一些收尾工作，比如：关闭定时器、接触自定义事件等等收尾操作。

（2）destroyed （销毁后）

一切又回到回到最初开始前的样子，轻轻它走了，正如它轻轻地来，挥一挥衣袖，不带走一遍云彩。

四、总结生命周期

常用的生命周期钩子
1.mounted:发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】
2.beforeDestroy:清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】
关于销毁Vue实例
1.销毁后借助Vue开发者工具看不到任何信息。
2.销毁后自定义事件会失效，但原生DOM事件依然有效
3.一般不会在beforeDestroy操作数据，因为即使操作数据，也不会触发更新流程了。