本页目录

生命周期

生命周期

Vue 的生命周期分为四个阶段八个钩子函数。

vue2	vue3	说明
beforeCreate	beforeCreate	组件实例被创建前
created	created	组件实例已经创建完成
beforeMount	beforeMount	组件被挂在到实例之前
mounted	mounted	组件被挂载到实例之后
beforeUpdate	beforeUpdate	组件数据发生变化之前
updated	updated	组件数据更新之后
beforeDestroy	beforeUnmount	实例销毁之前调用
destroyed	unmounted	实例销毁后调用
activated	activated	被 keep-alive 缓存的组件激活时调用
deactivared	deactivared	被 keep-alive 缓存的组件失活时调用
errorCaptured	errorCaptured	在捕获一个来自后代组件的错误时被调用
-	renderTracked	调试钩子，响应式依赖收集时调用
-	renderTriggered	调试钩子，响应式依赖被触发时调用
-	serverPrefetch	ssr，组件实例在服务器上被渲染前调用

setup

关于 setup，是一个最先执行的的初始化方法，早于所有钩子。

创建阶段

beforeCreate
- 实例还没创建，此时还不能访问 this；
- data、watch、computed、methods 等无法访问；
日常业务中很难会使用到，一般会在开发插件中使用，比如 vur-router 插件，会在这时候将 $router 全局属性注册到 app 上
beforeCreate -> created
- 这期间会 init options ，初始化 data、watch、computed、methods 等
created
- 实例创建完成，数据初始化完成；
- 此时可以访问 data、watch、computed、methods 等
- DOM 还没生成，如需要操作 dom 可使用 vm.$nextTick
组件初始化完毕，各种数据可以使用，常用于异步数据获取

挂在阶段

beforeMount
- 判断是否存在 el 选项，若不存在则停止编译，直到调用 vm.$mount(el) 才会继续编译；
- 此时可以访问 $el，但并未旋绕到 dom 中；
- 优先级：render > template > outerHTML
未执行渲染、更新，dom未创建
beforeMount -> mounted
- 这期间会 initial render create & insert DOM nodes
mounted
- vm.el 已完成 DOM 的挂载与渲染，此刻打印 vm.$el，发现之前的挂载点及内容已被替换成新的 DOM
- 已完成双向绑定
初始化结束，dom已创建，可用于获取访问数据和dom元素，以及通过 ref 访问子组件等

更新

beforeUpdate
- 更新的数据必须是被渲染在模板上的（el、template、render之一）
- 此时 view 层还未更新
- 若在 beforeUpdate 中再次修改数据，不会再次触发更新方法
updated
- 完成 view 层的更新
- 若在 updated 中再次修改数据，会再次触发更新方法（beforeUpdate、updated），会陷入死循环

销毁阶段

调用生命周期钩子函数 beforeDestory
从父组件中删除当前组件
移除当前组件内的所有观察者(依赖追踪)，删除数据对象的引用，删除虚拟 DOM
调用生命周期钩子函数 destoryed
关闭所有事件监听，删除当前根组件的引用，删除父级的引用

beforeDestroy
- 实例被销毁前调用，此时实例属性与方法仍可访问
销毁前，可用于定时器销毁、解绑全局事件、订阅取消等
destroyed
- 完全销毁一个实例。可清理它与其它实例的连接，解绑它的全部指令及事件监听器，所有的子实例也会被销毁
- 并不能清除 DOM，仅仅销毁实例

activated

deactivated

errorCaptured

父子组件

实例化时：
父beforeCreate->created->beforeMount->(子beforeCreate->created->beforeMount->mounted)->父mounted
更新时：
父beforeUpdate->(子beforeUpdate->updated)->父updated
销毁时：
同更新