一、Vue组件生命周期
Vue组件生命周期包含4个阶段
- 创建阶段
- 挂载阶段
- 更新阶段
- 销毁阶段
二、创建阶段
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、指令等等,都处于可用状态,马上要执行销毁过程,一般在此阶段:关闭定时器、取消订阅消息、解绑自定义事件等
收尾操作