Vue3 生命周期钩子

选项式 API 生命周期

1. beforeCreate

   • 触发时机: 组件实例初始化后，数据观测/事件配置之前
   • 用途: 初始化非响应式变量

2. created

   • 触发时机: 数据观测/方法/计算属性已配置完成
   • 用途: 发起API请求、操作响应式数据

3. beforeMount

   • 触发时机: 挂载DOM之前
   • 用途: 最终的状态确认

4. mounted

   • 触发时机: 组件挂载到DOM后
   • 用途: 操作DOM、集成第三方库

5. beforeUpdate

   • 触发时机: 数据变化导致DOM更新前
   • 用途: 更新前访问现有DOM状态

6. updated

   • 触发时机: DOM重新渲染后
   • 用途: 依赖DOM状态的操作

7. beforeUnmount (原beforeDestroy)

   • 触发时机: 组件销毁前
   • 用途: 清理定时器、取消事件监听

8. unmounted (原destroyed)

   • 触发时机: 组件销毁后
   • 用途: 最终清理操作

9. errorCaptured

   • 触发时机: 捕获后代组件错误时
   • 用途: 错误处理/上报

组合式 API 生命周期

在 setup() 中使用：

• onBeforeMount(() => {})
• onMounted(() => {})
• onBeforeUpdate(() => {})
• onUpdated(() => {})
• onBeforeUnmount(() => {})
• onUnmounted(() => {})
• onErrorCaptured(() => {})

特殊钩子

• renderTracked (调试)

  • 响应式依赖被追踪时触发

• renderTriggered (调试)

  • 响应式依赖触发重新渲染时

• serverPrefetch (SSR)

  • 服务端渲染时异步数据获取