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 提供了更灵活的生命周期管理方式