一、引出生命周期
1、又名：生命周期回调函数、生命周期函数、生命周期钩子
2、他是什么？Vue在关键时刻帮我们调用的一些特殊名字的函数
3、生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的
4、生命周期中的this指向的是 vm 或 组件实例化对象
二、声明周期图示
三、分析生命周期
1、beforeCreate() ： 此时无法通过vm访问到data中的数据、methods中的方法
2、created() : 此时可以通过vm访问到data中的数据、methods中的方法
3、beforeMount() ：此时：
(1)、页面呈现的是未经Vue编译的DOM结构
(2)、所有对DOM的操作，最终都不奏效4、mounted() ： 此时：
(1)、页面呈现的是经过Vue编译的DOM
(2)、对DOM的操作均有效（尽可能避免）
至此初始化过程结束，一般在此进行：
开启定时器、
发送网络请求、
订阅消息、
绑定自定义事件等等初始化操作5、beforeUpdate() ： 只要修改数据，就调用，
此时：
数据是新的，但页面是旧的，即：页面尚未和数据保持同步6、updated() ：此时：数据是新的，页面也是新的，即：页面和数据保持同步
根据新数据，生成新的虚拟DOM。随后与旧的虚拟DOM进行比较，最终完成页面更新7、beforeDestroy() ： 此时：
vm中的所有的data、methods、指令等等，都处于可用状态，马上要执行销毁过程，一般在此阶段：关闭定时器，取消订阅消息、解绑自定义事件等收尾操作8、destroyed() ：销毁完毕
四、 常用的生命周期钩子
1、mounted：发送ajax请求、启动定时器、绑定自定义属性、订阅消息等初始化操作
2、beforeDestroy：清除定时器、解绑自定义事件、取消订阅消息等收尾工作
五、 关于销毁Vue实例
1、销毁后借助Vue开发者工具看不到任何信息
2、销毁后自定义事件会失效，但原来的DOM事件依然有效
3、一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了
实例
<div id="root">
<h2 :style="{ opacity }">欢迎学习Vue</h2>
<button @click="stop">停止变换</button>
</div>
<script>
Vue.config.productionTip = false; //阻止vue在启动时生成生产提示
//创建Vue实例
new Vue({ //ViewModel
el: '#root',
data: {
opacity: 1,
},
methods: {
stop(){
this.$destroy();
}
},
// Vue完成模板的解析并把初始的真实的DOM元素放入页面后(挂载完毕)调用mounted
// 生命周期函数
mounted() {
this.timer = setInterval(() => {
this.opacity -= 0.01;
if (this.opacity <= 0) this.opacity = 1;
}, 16);
},
beforeDestroy() {
console.log('vm即将销毁');
clearInterval(this.timer)
},
});
</script>
