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,但执行顺序逻辑仍然一样。

相关推荐
JIE_42 分钟前
👨面试官:后端一次性给你一千万条数据,你该如何优化渲染?
前端
定栓1 小时前
vue3入门- script setup详解下
前端·vue.js·typescript
Json_Lee1 小时前
每次切项目都要改 Node 版本?macOS 自动化读取.nvmrc,解放双手!
前端
定栓1 小时前
vue3入门- script setup详解上
前端·javascript·vue.js
武汉刘德华1 小时前
Flutter配置环境,运行三端- iOS、android、harmony全流程操作实践(最新)
前端
酥饼_i1 小时前
你的自动化脚本又双叒叕崩了?
前端·人工智能·ai编程
Lsx-codeShare1 小时前
前端数据可视化:基于Vue3封装 ECharts 的最佳实践
前端·javascript·echarts·vue3·数据可视化
主宰者1 小时前
WPF外部打开html文件
前端·html·wpf
jason_yang1 小时前
vue3中定义组件的4种姿势
前端·vue.js
袋鱼不重1 小时前
Gitee 与 GitHub 仓库同步:从手动操作到自动化部署
前端·github