Vue父子组件生命周期呈嵌套结构：挂载时父→子→父（父beforeMount后暂停，等子mounted再执行父mounted）；更新时父beforeUpdate→子beforeUpdate→子updated→父updated；销毁时父beforeDestroy→子beforeDestroy→子destroyed→父destroyed。

Vue 父子组件生命周期钩子不是简单“父→子”或“子→父”串行，而是按渲染流程分层推进，形成父启→子全周期→父收的嵌套结构。

挂载阶段：父先初始化，子先挂载完成

首次渲染时，顺序严格固定：

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

关键点：子组件的 props 在 created 中已就绪；但父组件的 $refs.child 在父 mounted 之前为空，不能提前访问。

更新阶段：父先触发，子先响应

当响应式数据变化时：

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

Ainative Vue Sdk

使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……

下载

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

注意：在 updated 中修改响应式数据会触发新一轮更新，可能导致死循环，应避免。

销毁阶段：父先通知，子先清理

组件卸载（如 v-if 变为 false）时：

• 父组件触发 beforeDestroy（Vue 2）或 beforeUnmount（Vue 3）
• 子组件立即执行 beforeDestroy / beforeUnmount → destroyed / unmounted
• 子销毁完成后，父组件才执行 destroyed / unmounted

适合在此阶段统一清理定时器、解绑事件、取消 pending 请求——子组件应自行清理，父组件不依赖子是否清理完毕。

v-if 动态子组件的特殊行为

用 v-if 控制子组件显隐时：

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