Vue3 的生命周期钩子

Vue3 的生命周期钩子函数是组件从创建到销毁过程中各个阶段的关键节点，以下是主要特点和使用方式：

一、核心生命周期钩子（Composition API）

setup()

替代了 Vue2 的 beforeCreate 和 created 钩子

是组合式 API 的入口点，在此初始化响应式数据

挂载阶段

onBeforeMount：DOM 挂载前触发，此时模板已编译但未渲染

onMounted：组件挂载完成后调用，可访问 DOM 元素

更新阶段

onBeforeUpdate：数据变化后，DOM 更新前执行

onUpdated：DOM 更新完成后触发

卸载阶段

onBeforeUnmount：组件卸载前调用（原 Vue2 的 beforeDestroy）

onUnmounted：组件卸载后执行清理操作

二、父子组件执行顺序

挂载阶段：

父 setup → 父 onBeforeMount → 子 setup → 子 onBeforeMount → 子 onMounted → 父 onMounted

更新阶段：

父 onBeforeUpdate → 子 onBeforeUpdate → 子 onUpdated → 父 onUpdated

卸载阶段：

父 onBeforeUnmount → 子 onBeforeUnmount → 子 onUnmounted → 父 onUnmounted

三、注意事项

在 setup() 中使用生命周期需要显式导入

服务端渲染时 beforeMount/mounted 等钩子不会执行

避免在 updated 钩子中修改状态，可能导致无限循环

四、与 Vue2 的主要区别

钩子名称变化：destroyed → unmounted

新增调试钩子：onRenderTracked/onRenderTriggered

组合式 API 提供了更灵活的生命周期管理方式