Vue2.的生命周期
1、生命周期图
2、生命周期流程
上图中，红色框部分就是生命周期钩子函数，在我们开发中会经常使用到这些钩子：
2.1、初始化流程
beforeCreate钩子函数
- 英文意思是”将要创建“，在vue实例创建之前会触发。
- 既然实例没有创建，那么就不存在实例，因此data中的数据，methods中的方法都无法访问。
created钩子函数
- 英文意思是”创建完毕“，在vue实例创建完成后会触发。
- 此时，可以通过vue实例对象，访问到data中的数据，以及methods中的方法。
beforeMount钩子函数
- 英文意思是”将要挂载“，在vue实例挂载之前会触发。
- 挂载的概念：所谓挂载，就是Vue将虚拟DOM编译成真实DOM，渲染到页面上的过程。
- 既然在挂载之前，那就说明页面上不存在任何DOM结构，因此在这个钩子函数中对DOM元素进行的任何操作，都是不奏效的！
mounted钩子函数（常用）
- 英文意思是“挂载完毕”，在vue实例挂载完成后触发。
- 此时，页面上的DOM结构都已经呈现，对DOM的操作均有效，但还是应该尽可能地避免去直接操作DOM元素。
- 为什么这个钩子函数常用？
- 因为在开发当中，我们通常会在这里进行：开启定时器、发送网络请求、订阅消息、绑定自定义事件等等初始化的操作。
上述钩子函数从上往下的过程，就是一个vue实例的初始化流程，对应着上图的中间那一条直线下来。
2.2、销毁流程
beforeDestroy钩子函数（常用）
- 英文意思是“将要销毁”，在vue实例销毁之前触发。此时，vue实例中的data、methods等等功能都是正常可用的，等一下马上就要执行销毁过程了。
- 为什么这个钩子函数常用？
- 开发中，一般在此阶段进行：关闭定时器、取消订阅消息、解绑自定义事件等收尾操作，和上面的mounted相对应。
- 一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。
destroyed钩子函数
- 英文意思是“销毁完毕”，在vue实例销毁完成之后触发。一般在这个阶段啥也不干，没有什么用处，React中就没有这个钩子。
2.3、更新流程
beforeUpdate钩子函数
- 英文意思是“将要更新”，在vue实例中的data数据发生改变的时候触发。
- 此时，数据是新的，但页面是旧的，页面和数据没有保持同步。
updated钩子函数
- 英文意思是“更新完毕”，在页面上的数据更新完成后触发。
- 此时，此时，数据是新的，页面也是新的。页面和数据保持同步。
注意：更新流程中，渲染数据的时候没有触发mounted挂载的钩子函数，到updated就结束了。
3、总结
vm的生命周期：
- 将要创建（beforeCreate函数）
- 创建完毕（created函数）
- 将要挂载（beforeMount函数）
- 挂载完毕（mounted函数）【重要钩子】
- 将要更新（beforeUpdate函数）
- 更新完毕（updated函数）
- 将要销毁（beforeDestroy函数）【重要钩子】
- 销毁完毕（destroyed函数）
常用的生命周期钩子：
- mounted：一般在这里进行：开启定时器、发送网络请求、订阅消息、绑定自定义事件等初
始化操作。 - beforeDestroy：一般在此阶段：关闭定时器、取消订阅消息、解绑自定义事件等收尾操作。