vue3的生命周期

以下是Vue 3生命周期的系统梳理，结合Composition API和Options API的对比说明，帮助您快速掌握核心要点：

---

一、Vue 3生命周期全景图

1. Composition API生命周期钩子

钩子函数	对应Options API	触发时机
onBeforeMount	beforeMount	组件挂载到DOM前
onMounted	mounted	组件挂载到DOM后（可访问DOM）
onBeforeUpdate	beforeUpdate	响应式数据变化导致DOM更新前
onUpdated	updated	DOM更新完成后（避免在此修改数据）
onBeforeUnmount	beforeDestroy	组件卸载前（替代Vue2的beforeDestroy）
onUnmounted	destroyed	组件卸载后（清理定时器/事件监听）
onErrorCaptured	errorCaptured	捕获子孙组件错误时

2. 新增调试钩子（DevTools专用）

• onRenderTracked：响应式依赖被追踪时触发
• onRenderTriggered：响应式依赖触发重新渲染时

---

二、核心生命周期阶段详解

1. 初始化阶段（Setup）

javascript

复制

// Composition API示例 import { onMounted } from 'vue' setup() { onMounted(() => { console.log('DOM 已挂载') // 替代Options API的mounted }) }

• 关键差异：Composition API的钩子在setup()中同步注册，但执行时机与Options API一致

2. 更新阶段（Data Changes）

• 执行顺序：
  beforeUpdate → 虚拟DOM重新渲染 → updated
• 典型场景：
  在beforeUpdate获取更新前的DOM状态，在updated中操作更新后的DOM

3. 销毁阶段（Cleanup）

javascript

复制

onBeforeUnmount(() => { clearInterval(timer) // 必须手动清理副作用 })

• 对比Vue2：
  beforeDestroy → beforeUnmount
destroyed → unmounted
  （Vue3命名更语义化）

---

三、实践建议与常见问题

1. Composition API最佳实践

   • 在onMounted中访问DOM/调用API
   • 在onUnmounted中清除全局事件监听（如window.resize ）
   • 避免在updated中修改响应式数据（可能导致死循环）

2. 与React Hooks的区别

   Vue 3	React
   生命周期钩子显式注册	useEffect组合替代
   自动依赖追踪	需手动声明依赖数组

3. TypeScript类型提示

   typescript

   复制

   import type { OnMounted } from 'vue' const onMounted: OnMounted = (cb) => { ... }

---

四、可视化执行流程

创建实例 → setup() → beforeMount → 渲染DOM → mounted  
          ↓  
数据更新 → beforeUpdate → 重新渲染 → updated  
          ↓  
卸载组件 → beforeUnmount → 清除DOM → unmounted 

如需具体场景的代码示例（如SSR中的生命周期差异），可告知具体需求方向。