Vue生命周期(vue life cycle) 详解

Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。

钩子函数(生命周期函数)：在特定的时间点上自动触发的函数。我们把一些特定的逻辑放在特定的生命周期函数中。

VM的一生：

将要创建===>调用beforeCreate函数

创建完毕===>调用created函数

将要挂载===>调用beforeMount函数

挂载完毕===>调用mounted函数   (！important) ============>重要钩子

将要更新===>调用beforeUpdate函数

更新完毕===>调用updated函数

将要销毁===>调用beforeDestroy函数   (！important) ============>重要钩子

销毁完毕===>调用destroyed函数

new vue({配置项}) 创建vue实例

Init Events & LifeCycle :  初始化：生命周期、事件，但数据代理还未开始。

BeforeCreate：此时：无法通过VM访问到data中的数据，methods中的方法。可以访问this.实例

Init Injections & Reactivity  :  初始化：数据监测、数据代理

Created： 此时 可以通过VM访问到data中的数据、methods中配置的方法。

Has 'el' Option?：如果没有el模板 走 mount方式挂在(main.js文件里)

Has 'template' Options?：定义的vue实例中是否有template模板 ，如果有走template没有走html

Compile template into render function

Compile el's outerHTML as template

以上阶段Vue开始解析模板，生成虚拟DOM(内存中)，页面还不能显示解析好的内容。

BeforeMount：此时  页面呈现的是未经VUE编译的DOM结构，所有对DOM的操作最终都不生效。

Create VM.$el and replace 'el' with it : 将内存中的虚拟DOM转为真实DOM插入页面

mounted ： 此时  页面呈现的是经过VUE编译的DOM，对DOM的操作均有效(尽可能避免)，至此初始化过程结束，一般再次进行：开启 定时器，发送网络请求(ajax请求)、订阅消息、绑定自定义事件等初始化操作。

Mounted  BeforeUpdate：此时  数据是新的，但页面是旧的，即：页面尚未和数据保持同步。

Mounted  Virtual DOM re-render and patch :  根据新数据，生成新的虚拟DOM，随后与旧的虚拟DOM进行比较，最终完成页面的更新，即 完成了Model→View的更新

Mounted updated：此时  数据是新的，页面也是最新的，即：页面和数据保持同步

beforeDestroy：此时 VM中所有的，data、methods、指令等等，都处于可用状态，马上要执行销毁过程，一般在此阶段：关闭定时器、取消订阅消息、解绑自定义事件等收尾工作。

Teardown watchers child components and event listeners：

Destroyed： 

 关于销毁VUE实例

1.销毁后借助vue开发者工具看不到任何信息

2.销毁后自定义事件会失效，但原生DOM事件依然有效

3.一般不会在beforeDestroy操作数据，因为即使操作数据也不会再触发更新流程了。