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

相关推荐
lee5761 小时前
老是忘记package.json,备忘一下 webpack 环境下 Vue Cli 和 Vite 命令行工具对比
vue.js
喝拿铁写前端2 小时前
前端与 AI 结合的 10 个可能路径图谱
前端·人工智能
codingandsleeping2 小时前
浏览器的缓存机制
前端·后端
-代号95273 小时前
【JavaScript】十二、定时器
开发语言·javascript·ecmascript
灵感__idea4 小时前
JavaScript高级程序设计(第5版):扎实的基本功是唯一捷径
前端·javascript·程序员
摇滚侠4 小时前
Vue3 其它API toRow和markRow
前端·javascript
難釋懷4 小时前
JavaScript基础-history 对象
开发语言·前端·javascript
beibeibeiooo4 小时前
【CSS3】04-标准流 + 浮动 + flex布局
前端·html·css3
拉不动的猪4 小时前
刷刷题47(react常规面试题2)
前端·javascript·面试
浪遏4 小时前
场景题:大文件上传 ?| 过总字节一面😱
前端·javascript·面试