vue子组件生命周期的执行顺序

在 Vue 中,子组件的生命周期钩子函数的执行顺序受父组件的影响,通常遵循**"先创建子组件,后创建父组件;先销毁父组件,后销毁子组件"**的原则。


1. 组件创建(挂载)阶段

当父组件挂载时,子组件的生命周期钩子执行顺序如下:

执行顺序

  1. 父组件的 beforeCreate

  2. 父组件的 created

  3. 父组件的 beforeMount

  4. 子组件的 beforeCreate

  5. 子组件的 created

  6. 子组件的 beforeMount

  7. 子组件的 mounted

  8. 父组件的 mounted

说明

  • 先创建 父组件的实例beforeCreatecreated),但此时模板还未编译,子组件还未初始化。

  • 父组件的 beforeMount 过程中,Vue 发现了子组件标签,于是开始初始化子组件。

  • 子组件的 beforeCreatecreated 先执行 ,然后子组件挂载到 DOM,触发 mounted

  • 子组件 mounted 结束后,才执行父组件的 mounted


2. 组件更新(更新)阶段

当父组件的 data 发生变化,触发重新渲染时,执行顺序如下:

执行顺序

  1. 父组件的 beforeUpdate

  2. 子组件的 beforeUpdate

  3. 子组件的 updated

  4. 父组件的 updated

说明

  • 由于父组件的 data 变更,先触发 父组件的 beforeUpdate

  • 发现子组件的 props 可能也受影响,因此进入 子组件的 beforeUpdate

  • 子组件完成更新后,执行 子组件的 updated

  • 最后,执行 父组件的 updated


3. 组件销毁(卸载)阶段

当父组件被销毁时,子组件的生命周期钩子执行顺序如下:

执行顺序

  1. 父组件的 beforeDestroy

  2. 子组件的 beforeDestroy

  3. 子组件的 destroyed

  4. 父组件的 destroyed

说明

  • 销毁时是"先父后子"调用 beforeDestroy,但先销毁子组件,再销毁父组件

  • 子组件 beforeDestroy 先执行,随后 destroyed 触发

  • 最后执行 父组件的 destroyed


总结

完整生命周期执行顺序

阶段 父组件 子组件
创建前 beforeCreate -
创建后 created -
挂载前 beforeMount -
子组件创建前 - beforeCreate
子组件创建后 - created
子组件挂载前 - beforeMount
子组件挂载后 - mounted
父组件挂载后 mounted -
更新前 beforeUpdate beforeUpdate
更新后 updated updated
销毁前 beforeDestroy beforeDestroy
销毁后 destroyed destroyed

核心原则

  1. 子组件的 beforeCreatecreatedbeforeMount 在父组件 beforeMount 之后执行

  2. 子组件的 mounted 在父组件 mounted 之前执行

  3. 子组件的 beforeDestroydestroyed 在父组件 beforeDestroy 之后执行(即先销毁子组件,再销毁父组件)。

这个顺序对于组件通信、数据流管理等很重要,尤其在 mounted 钩子里可能需要访问子组件的 DOM 或数据时,需要注意时机。


如果你是用 Vue 3,beforeDestroydestroyed 被替换为 onBeforeUnmountonUnmounted,但执行顺序逻辑仍然一样。

相关推荐
李长渊哦4 小时前
深入理解 JavaScript 中的全局对象与 JSON 序列化
开发语言·javascript·json
Senar6 小时前
如何判断浏览器是否开启硬件加速
前端·javascript·数据可视化
HtwHUAT6 小时前
实验四 Java图形界面与事件处理
开发语言·前端·python
利刃之灵6 小时前
01-初识前端
前端
codingandsleeping6 小时前
一个简易版无缝轮播图的实现思路
前端·javascript·css
天天扭码6 小时前
一分钟解决 | 高频面试算法题——最大子数组之和
前端·算法·面试
全宝7 小时前
🌏【cesium系列】01.vue3+vite集成Cesium
前端·gis·cesium
拉不动的猪7 小时前
简单回顾下插槽透传
前端·javascript·面试
烛阴8 小时前
Fragment Shader--一行代码让屏幕瞬间变黄
前端·webgl
爱吃鱼的锅包肉8 小时前
Flutter路由模块化管理方案
前端·javascript·flutter