Vue 3组合式API生命周期函数以on开头，需在setup中导入调用：onBeforeMount替代created逻辑（setup体执行）、onMounted用于DOM操作、onBeforeUpdate/onUpdated处理更新、onBeforeUnmount/onUnmounted负责清理、onErrorCaptured捕获错误。
Vue 3 组合式 API 中的生命周期函数，是选项式 API 生命周期钩子的直接对应，但调用方式和使用场景更明确、更函数化。它们不依赖 this，必须在 setup() 或 <script setup> 内通过导入调用，且只在组件有效上下文中执行。
核心映射关系
组合式 API 的生命周期函数全部以 on 开头，名称与选项式 API 高度一致，仅个别命名微调：
-
created → onBeforeMount（注意：没有独立的
onCreated）
实际逻辑常放在setup()函数体中——因为setup在组件实例创建后、模板编译前执行，等效于created阶段；此时响应式数据已可用，但 DOM 尚未生成。 -
mounted → onMounted
组件挂载完成、真实 DOM 可访问时触发，适合发起请求、操作 DOM、初始化第三方库。 -
beforeUpdate → onBeforeUpdate
响应式数据变化后、DOM 更新前执行，可用于记录变更前状态或取消不必要的更新。 -
updated → onUpdated
DOM 更新完成后触发，适合依赖新 DOM 结构的操作（如焦点恢复、图表重绘）。 -
beforeUnmount → onBeforeUnmount
组件卸载前执行，是清理定时器、事件监听、WebSocket 连接等资源的关键时机。 -
unmounted → onUnmounted
组件完全销毁后触发，通常用于最终清理或日志记录。 -
errorCaptured → onErrorCaptured
捕获子组件抛出的错误，可用于统一错误处理或降级展示。
为什么没有 onCreated？
组合式 API 将 created 阶段的逻辑自然融入 setup() 函数体本身——变量声明、ref/reactive 初始化、watch 设置、基础计算属性定义等，都发生在此处。它不是“钩子”，而是生命周期的起点，比任何 onXXX 都早。
常见使用注意事项
- 所有
onXXX函数必须在setup()内部同步调用，不能在条件分支或异步回调中调用（否则会失效）。 - 多个相同钩子可多次调用，执行顺序按注册顺序，适用于逻辑拆分或复用组合函数。
-
onMounted是发起首次 API 请求最稳妥的位置；若需服务端渲染兼容，应配合onServerPrefetch（SSR 场景）。 -
onBeforeUnmount和onUnmounted需配对使用：前者做“可中断”的清理（如清除 pending 请求），后者做“不可逆”的收尾（如释放内存引用）。
简单对比示例
选项式 API 的 mounted：
立即学习“前端免费学习笔记（深入）”；
export default { mounted() { console.log('DOM 已就绪') } }等价于组合式 API 的写法：
import { onMounted } from 'vue'onMounted(() => { console.log('DOM 已就绪') })
