Vue 3父子组件生命周期执行顺序为父启→子全周期→父收：挂载时父beforeCreate→created→beforeMount后暂停，子完成全部钩子后父mounted；更新和销毁同理分阶段嵌套推进。

Vue 3 中父子组件生命周期钩子的执行顺序不是“父走完再走子”，也不是简单并行，而是按渲染流程深度优先、分阶段嵌套推进的。核心逻辑是：父启 → 子全周期 → 父收，每个大阶段（挂载/更新/销毁）内部都严格遵循这一结构。

挂载阶段：父先开路，子先落地，父最后收尾

首次渲染时，顺序固定为：

• 父：beforeCreate → created → beforeMount
• 进入父 beforeMount 后，暂停自身挂载，开始初始化子组件
• 子：beforeCreate → created → beforeMount → mounted
• 子 mounted 完成后，父才继续执行自己的 mounted

关键点：子组件的 props 在 created 就已就绪；但父组件的 $refs.child 或 ref 绑定的子实例，在父 mounted 前仍为 null，不能提前访问。

更新阶段：父先感知，子先响应，父最后确认

当响应式数据变化触发更新时：

立即学习“前端免费学习笔记（深入）”；

vue3-ant-design-vue-component-skill

封装基于 Vue 3 + Ant Design Vue 的通用业务组件，提供标准化模板与最佳实践。

下载

• 父触发 beforeUpdate
• 接着子依次执行 beforeUpdate → updated
• 最后父执行 updated

注意：updated 中修改响应式数据会立即触发下一轮更新，容易造成死循环，应避免直接赋值，必要时用 nextTick 或条件判断做防护。

销毁阶段：父先通知，子先清理，父最后收场

组件卸载（如 v-if="false"）时：

• 父触发 beforeUnmount
• 子立即执行 beforeUnmount → unmounted
• 子销毁完成后，父才执行 unmounted

适合统一清理定时器、解绑事件、取消 pending 请求——子组件应自行清理资源，父组件不依赖子是否清理完毕，也不应在父 unmounted 中操作已销毁的子实例。

v-if 动态子组件：重建即重来，父不受扰

用 v-if 控制显隐时：

• 隐藏：只触发子完整销毁流程（beforeUnmount → unmounted），父生命周期完全不受影响
• 显示重建：子走完整创建→挂载流程（beforeCreate → mounted），父不会重新执行 created 或 mounted
• 坑点：若父异步获取的数据在 created 后才写入 data，而子仅在 created 读一次 props，可能拿到 undefined —— 应改用 watch 监听 props 变化