一篇文章解决vue生命周期

Vue生命周期

Vue 实例从创建到销毁的过程，就是生命周期。 从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。（在以下流程中，生命钩子函数用加粗表示）

挂载流程

初始化生命周期、事件，但数据代理为开始；

beforeCreate：此时无法通过vm访问到data中的数据以及methods中的方法；

初始化数据监测、数据代理；

created：此时可以通过vm访问到data中的数据，methods中的方法；

Vue开始解析模板，生成虚拟DOM（内存中），页面还不能显示解析好的内容；

beforeMount：此时页面呈现的是未经Vue编译的DOM 结构，所有对DOM的操作都不奏效；

将内存中的虚拟DOM转为真实DOM插入页面；

mounted：此时页面中呈现的是经过Vue编译的DOM，对DOM的操作均有效，至此初始化过程结束，一般在此进行：开启计时器、发送网络请求、订阅消息、绑定自定义事件等初始化操作。

更新流程（当页面数据更新时）

beforeUpdate：此时数据时新的，但页面是旧的，即：页面尚未与数据保持同步；

根据新数据生成新的虚拟DOM，随后与旧的虚拟DOM进行比较，最终完成页面更新；

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

销毁流程（当调用vue.$destroy()时）

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

移除vm实例的监视、子组件以及自定义事件监听

destroy：实例销毁完毕。