一、Vue组件生命周期

Vue组件生命周期包含4个阶段

• 创建阶段
• 挂载阶段
• 更新阶段
• 销毁阶段

Vue组件生命周期.png

二、创建阶段

1、初始化：生命周期、事件
2、数据监测、数据代理

创建之前（BeforeCreate）

在该生命周期中无法通过 VM 访问到 data 中的数据、methods 中的方法

创建完成（created）

在该生命周期中可以通过 VM 访问到 data 中的数据、methods 中配置的方法

三、解析模版

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

四、挂载阶段

挂载之前（BeforeMount）

1、在次阶段，页面呈现的是 未经Vue编译的DOM结构
2、所有对DOM的操作，最终都不奏效，因为接下来会将内存中的 虚拟DOM 转为 真实DOM插入页面

挂载完成

• 在该阶段，页面中呈现的是经过Vue编译的DOM
• 在该阶段，对DOM的操作均有效（不推荐操作DOM，尽可能避免），至此初始化过程结束，一般在此进行：开启定时器、发生网络请求、订阅消息、绑定自定义事件等初始化操作

五、更新阶段

即将更新（BeforeUpdate）

在该阶段，数据是新的，但页面是旧的，即：页面尚未和数据保存同步

新旧虚拟DOM对比

根据新数据，生成新的虚拟DOM，随后与旧的虚拟DOM进行比较，最终完成页面更新，即完成了Model -> View 的更新

更新完成（updated）

在该阶段，数据是新的，页面也是新的，即：页面和数据保持同步

六、销毁阶段

即将销毁（BeforeDestroy）

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

销毁（Destroyed）