Vue的生命周期

Vue实例从创建到销毁的过程就是生命周期，既指从创建、初始化数据、编译模板、挂载DOM到渲染、更新渲染、销毁等一系列过程，他主要分为8个阶段，创建前后、载入前后、更新前后、销毁前、销毁后、以及一些特殊场景的生命周期。

官方给出的图示：

第一步：Init Events& Lifecycle：事件和生命周期钩子初始化，此时数据代理未开始。

第二部：Init injections&reactivity：初始化inject provide state，开启数据监测，数据代理。

第三步：Has 'el' option：是否有el对象 没有挂载

第四步：Has 'template' option:是否有模板：

        有则走Compile template into render funcation，将模板转化为render函数，通过render函数去渲染创建dom树，

        没有则走Compile 'el's outerHtml as template，编译el对象作为html作为模板。

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

第五步：Create vm.$el and replace 'el' with it：创建Vue实例下辖的$el(虚拟)并将其替换真正的dom，将内存中的虚拟DOM转为真实DOM插入页面。

第六步：Mounted：挂在完毕，此阶段实时监控data里面的数据变化，以便随时更新。当属就被修改时触发Virtual DOM re-render and patch：根据新数据，生产新的虚拟DOM，随后与旧的虚拟DOM进行比较，最终完成页面更新。虚拟DOM重新渲染并应用更新。

第七步：调用vm.$destroy()函数时，准备销毁，执行Teardown watchers.child components and event listeners：接触绑定销毁子组件以及事件监听者。

第八步：Destroyed：组件已销毁。

在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码。

BeforeCreate：在组件实例化初始化完成之后立即调用。此时，无法通过vm访问到data中的数据、methods中的方法，

Created：在组件实例处理完所有与状态相关的选项后调用。此时，可以通过vm访问data中的数据，methods中配置的方法。此时挂载阶段还未开始,$el属性不可用。

BeforeMount：在组件被挂载之前调用。此时$el属性可用，页面呈现的时未经Vue编译的DOM结构。所有对DOM的操作，最终都不奏效。

Mounted：在组件被挂载之后调用。此时，页面中呈现的时经过Vue编译的DOM。对DOM的操作均有效（尽可能避免）。至此初始化过程结束，一般在此进行：开启定时器、发送网络请求，订阅消息、绑定自定义事件、等初始化操作。

BeforeUpda：在组建即将因为一个响应式状态变更而更新其DOM树之前调用。此时，数据时新的，但页面是旧的，即：页面尚未和数据保持同步。

Updated：在组件因为一个响应式状态变更而更新其DOM树之后调用。此时：数据是新的，页面也是新的，即L页面和数据保持同步。

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

Destroyed：完全销毁一个实例，可清理它与其他实例的连接，解绑它的全部指令以及事件监听器并不能清除DOM，仅仅销毁实例。

最后需要说明一下Created和mounted的区别：

Created：是在组件实例一旦创建完成的时候立即调用，这时候页面dom节点并未生成。

Mounted：是在页面dom节点渲染完毕之后就立即执行的，created的触发时机要比mounted更早一些。

两者的相同点都是可以拿到实例对象的属性和方法，但是如果放在mounted请求有可能导致页面闪动，但如果在页面加载前完成则不会出现此情况。