【Vue】父子组件的生命周期

个人博客：haichenyi.com。感谢关注

一. 目录

• 一–目录
• 二–Vue的生命周期​
• 三–挂载阶段（父子组件初次渲染）
• 四–更新阶段（父组件数据变化引发子组件更新）​
• 五–销毁阶段（父组件销毁引发子组件销毁）​​
• 六–常见误区与最佳实践​​​
• 七–总结​​​

二. Vue的生命周期​

  Vue的生命周期指的是Vue实例从创建到销毁的整个过程。在这个过程中，Vue提供了一些生命周期钩子函数，允许我们在不同的阶段执行自己的代码。常见的钩子有beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed这些。每个钩子对应不同的阶段，比如创建、挂载、更新、销毁等。

三. 挂载阶段（父子组件初次渲染）

执行顺序

父 beforeCreate → 父 created → 父 beforeMount  
    ↓  
子 beforeCreate → 子 created → 子 beforeMount → 子 mounted  
    ↑  
父 mounted

流程详解

1. 父组件初始化

• 父组件执行到 beforeMount 后暂停，开始处理模板中的子组件。

2. 子组件完整生命周期

• 子组件完成自身的 beforeCreate → created → beforeMount → mounted 流程。

3. 父组件完成挂载​

• 子组件全部挂载后，父组件触发 mounted。

关键结论​

• 子组件的 mounted 先于父组件执行​​： 父组件必须等待所有子组件挂载完成后，自身才会标记为已挂载。
• ​created 阶段可访问父组件数据​​： 父组件的 created 在子组件之前完成，因此子组件在 created 中可通过 props 获取父组件数据。

四. 更新阶段（父组件数据变化引发子组件更新）

执行顺序​

父 beforeUpdate  
    ↓  
子 beforeUpdate → 子 updated  
    ↑  
父 updated

流程详解​

1. 父组件更新触发

• 父组件数据变化后，先触发自身 beforeUpdate。

2. 子组件更新流程

• 子组件接收新的 props，执行 beforeUpdate → updated。

3. 父组件完成更新

• 子组件更新完成后，父组件触发 updated。

关键结论​

• ​子组件的更新在父组件更新周期内完成​​： 父组件的 updated 钩子需要等待所有子组件更新完毕。

五. 销毁阶段（父组件销毁引发子组件销毁）

​执行顺序​

父 beforeDestroy  
    ↓  
子 beforeDestroy → 子 destroyed  
    ↑  
父 destroyed

流程详解​

1. ​​父组件准备销毁

• 父组件触发 beforeDestroy，开始清理自身资源。

2. 子组件销毁

• 子组件依次执行 beforeDestroy → destroyed。

3. 父组件完成销毁

• 所有子组件销毁后，父组件触发 destroyed。

关键结论

• 子组件的销毁先于父组件完成​​： 父组件必须等待所有子组件销毁后，自身才会销毁。

六. 常见误区与最佳实践

误区​

1. ​​在父组件的 mounted 中直接操作子组件DOM
   • 错误：父组件的 mounted 触发时，子组件已挂载，但若子组件有异步渲染逻辑（如 v-if），DOM可能仍未就绪。
   • 正确：使用 this.$nextTick 确保子组件DOM更新完成。
2. 在子组件的 created 中依赖父组件的异步数据
   • 错误：父组件通过异步请求传递 props 给子组件时，子组件的 created 可能早于父组件数据返回。
   • 正确：在子组件中使用 watch 监听 props 变化，或在父组件中通过 v-if 控制子组件渲染时机。

最佳实践​
3. 数据初始化
- 父组件数据在 created 中加载，子组件在 created 中通过 props 接收父数据。
4. DOM 操作
- 子组件的 mounted 是最早可安全操作自身 DOM 的钩子。
5. ​​资源释放
- 在 beforeDestroy 中手动清除定时器、事件监听等，避免内存泄漏。

七. 总结

  父子组件生命周期的核心规律是 ​​父组件进入阶段后等待子组件完成，再继续自身流程。 掌握这一顺序，可以精准控制数据流和DOM操作时机，避免因生命周期混乱导致的Bug。