详解 Vue 生命周期

MangoRu 字数: 9835 阅读耗时: 24 分钟 2021/03/03 博客独享热度: 24 评论:

Vue生命周期

Vue的生命周期：

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

生命周期	描述
`beforeCreate`	组件实例被创建之初执行时组件实例还未创建，通常用于插件开发中执行一些初始化任务
`created`	组件实例已经完全创建组件实例初始化完毕，各种数据可以使用，常用于异步数据获取
`beforeMount`	组件挂载之前未执行渲染、更新，dom 未创建
`mounted`	组件挂载到实例上去之后初始化结束，dom 已创建，可用于获取访问数据和 dom 元素
`beforeUpdate`	组件数据发生变化，更新之前更新前，可用于获取更新前各种状态
`updated`	组件数据更新之后更新后，所有状态已是最新
`beforeDestroy`	组件实例销毁之前销毁前，可用于一些定时器或订阅的取消
`destroyed`	组件实例销毁之后组件已销毁
`activated`	keep-alive 缓存的组件激活时
`deactived`	keep-alive 缓存的组件停用时调用
`errorCaptured`	捕获一个来自子孙组件的错误时被调用

Vue生命周期的整体流程如下图所示：

beforeCreate → created
初始化vue实例，进行数据观测
created
完成数据观测，属性与方法的计算，watch、event事件回调的配置
- 可调用methods中的方法，访问和修改data数据触发响应式渲染dom
- 可通过computed和watch完成数据计算
- 此时vm.$el并未被创建
created → beforeMount
判断是否存在el选项，不存在则停止编译，直至调用vm.$mounted(el)才会继续编译
- 优先级：render > template > 外层HTML
- vm.el获取到的是挂载dom的
beforeMount
此阶段可获取到vm.el，vm.el虽已完成dom初始化，但并未挂载在el选项上
beforeMount → mounted
vm.el完成挂载，vm.$el生成的dom替换了el选项对应的dom
mounted
vm.el已经完成dom的挂载与渲染，此刻打印vm.$el，发现之前的挂载点及内容已被替换为新的dom
beforeUpdate
更新的数据必须是被渲染在模板上的(el、template、render之一)
- 此时view层还未更新；若再次修改数据，不会再次触发更新方法
updated
完成view层的更新；若再次修改数据，会再次触发更新方法(beforeUpdate、updated)
beforeDestroy
实例被销毁前调用，此时实例属性与方法仍可访问
destroyed
完全销毁一个实例
- 可清理它与其它实例的连接，解绑它的全部指令及事件监听器
- 并不能清除dom，仅仅销毁实例

	created	mounted
不同点	是在组件实例一旦创建完成的时候立刻调用，页面 dom 节点并未生成，触发时机比 mounted 更早	是在页面 dom 节点渲染完毕后立刻执行的
相同点	都能拿到实例对象的属性和方法

未完待续……