前端 Vue: 生命周期

Vue 2 生命周期

创建阶段

• beforeCreate：实例初始化后，数据观测和事件配置之前
• created：实例创建完成，已配置数据观测，可访问 data 和 methods

挂载阶段

• beforeMount：模板编译完成，但未挂载到 DOM
• mounted：实例已挂载到 DOM，可进行 DOM 操作

更新阶段

• beforeUpdate：数据更新时，DOM 重新渲染之前
• updated：DOM 重新渲染完成后

销毁阶段

• beforeDestroy：实例销毁之前，可进行清理工作
• destroyed：实例已销毁，所有绑定和子实例都被销毁

Vue 3 生命周期

创建阶段

• beforeCreate：同 Vue 2
• created：同 Vue 2

挂载阶段

• beforeMount：同 Vue 2
• mounted：同 Vue 2

更新阶段

• beforeUpdate：同 Vue 2
• updated：同 Vue 2

卸载阶段（命名变化）

• beforeUnmount：替代 Vue 2 的 beforeDestroy
• unmounted：替代 Vue 2 的 destroyed

新增生命周期

• onRenderTracked：开发模式下，追踪响应式依赖时调用
• onRenderTriggered：开发模式下，响应式依赖触发重新渲染时调用
• onActivated：keep-alive 缓存的组件激活时调用
• onDeactivated：keep-alive 缓存的组件停用时调用
• onErrorCaptured：捕获后代组件错误时调用
• onServerPrefetch：SSR 专用，组件实例在服务器上被渲染之前调用

Vue 3 Composition API 对应的钩子函数

• onBeforeMount​ → beforeMount
• onMounted​ → mounted
• onBeforeUpdate​ → beforeUpdate
• onUpdated​ → updated
• onBeforeUnmount​ → beforeUnmount
• onUnmounted​ → unmounted
• onActivated​ → activated
• onDeactivated​ → deactivated

主要差异

1. beforeDestroy/destroyed​ 更名为 beforeUnmount/unmounted
2. 新增开发调试钩子：onRenderTracked 和 onRenderTriggered
3. 错误处理钩子：onErrorCaptured
4. SSR 支持：onServerPrefetch
5. Composition API 对应函数​ 以 "on" 开头