Vue 3 生命周期钩子详解
Vue 3 的生命周期钩子分为选项式 API 和组合式 API 两种使用方式，以下是所有生命周期钩子的详细介绍：
1. 选项式 API 生命周期
-
beforeCreate
- 在实例初始化之后，数据观测(data observer)和事件配置之前调用
- 此时 data、methods 等选项还未初始化
-
created
- 实例创建完成后调用
- 已完成：数据观测、属性和方法的运算，watch/event 事件回调
- 未完成：挂载阶段，DOM 还未生成
-
beforeMount
- 在挂载开始之前被调用
- 相关的 render 函数首次被调用
-
mounted
- 实例被挂载后调用
- 已完成：DOM 渲染
- 注意：不保证所有子组件也都一起被挂载
-
beforeUpdate
- 数据更新时调用，发生在虚拟 DOM 打补丁之前
- 适合在更新之前访问现有 DOM
-
updated
- 由于数据更改导致的虚拟 DOM 重新渲染和打补丁后调用
- 注意：不保证所有子组件也都一起被重绘
-
beforeUnmount
- 实例销毁之前调用
- 适合移除事件监听器、定时器等
-
unmounted
- 实例销毁后调用
- 所有指令都已解绑，所有事件监听器已移除
2. 组合式 API 生命周期
组合式 API 使用 onX 形式导入生命周期钩子：
import { onMounted, onUpdated, onUnmounted }
from 'vue'
setup() {
onMounted(() => {
console.log('组件已挂载!')
})
onUpdated(() => {
console.log('组件已更新!')
})
onUnmounted(() => {
console.log('组件已卸载!')
})
}
对应关系：
- beforeCreate → 使用 setup() 替代
- created → 使用 setup() 替代
- beforeMount → onBeforeMount
- mounted → onMounted
- beforeUpdate → onBeforeUpdate
- updated → onUpdated
- beforeUnmount → onBeforeUnmount
- unmounted → onUnmounted
3. 特殊生命周期
- activated (keep-alive 组件激活时调用)
- deactivated (keep-alive 组件停用时调用)
- errorCaptured (捕获后代组件错误时调用)
- renderTracked (开发模式，跟踪虚拟 DOM 重新渲染时调用)
- renderTriggered (开发模式，虚拟 DOM 重新渲染被触发时调用)
4. 生命周期图示
创建阶段：
setup() → beforeCreate → created →
beforeMount → mounted
更新阶段：
beforeUpdate → updated
销毁阶段：
beforeUnmount → unmounted
5. 最佳实践
- 异步请求适合在 created 或 onMounted 中进行
- 清除副作用(定时器、事件监听)应在 beforeUnmount 或 onBeforeUnmount 中进行
- 避免在 updated 中修改状态，可能导致无限循环
- 组合式 API 更推荐使用 setup() 中的生命周期钩子
