【原创】Vue 的生命周期

Vue 的生命周期

什么是生命周期

• 生命周期又名生命周期回调函数、生命周期函数、生命周期钩子。
• Vue 在关键时刻帮我们调用的一些特殊名称的函数。
• 生命周期函数的名称不可更改，但内容是根据开发者的需求编写的。
• 生命周期函数的 this 指向 vm 或者组件实例对象。

beforeCreate、created（数据监测和数据代理创建之前和创建完毕）
beforeMount、mounted
beforeUpdate、updated
beforeDestroy、destroyed

初始化

初始化事件和生命周期（事件修饰符制定规则），数据代理还未开始。
生命周期函数：beforCreate，无法通过 vm 访问到 data 中的数据和 methods 中的方法。
数据监测 数据代理 创建之前。

初始化 数据监测 数据代理

生命周期函数：created，此时可以通过 vm 访问到 data 中的数据和 methods 中的方法。

挂载之前

Vue 开始解析模板，生成虚拟 DOM（内存中），页面还不能显示解析好的内容。
生命周期函数：beforeMount，此时页面呈现的是未经 Vue 编译的 DOM 结构，所有对 DOM 的操作最终都不生效，所以不要在这个阶段对 DOM 进行操作。

挂载完毕

生命周期函数：mounted，常用。

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

更新之前

生命周期函数：beforeUpdate。此时数据是新的，页面是旧的，即页面尚未和数据同步。

更新完毕

根据新数据生成新的虚拟 DOM，随后与旧的虚拟 DOM 进行比较，最终完成页面更新。
生命周期函数：updated。此时数据是新的，页面也是新的，即页面与数据保持同步。

销毁之前

此时，所有的数据、methods、指令都处于可用状态，马上要执行销毁过程。
生命周期函数：beforeDestroy，常用。一般在此进行销毁定时器、取消订阅消息、解绑自定义事件等收尾操作。

一般不会在 beforeDestroy 中操作数据，因为即便操作数据也不会触发更新流程了。

销毁完毕

生命周期函数：destroyed,整个生命周期结束。

• 销毁后开发者工具看不到任何信息。
• 销毁后自定义事件会失效，但原生 DOM 事件依然有效。