在 Vue 中,子组件的生命周期钩子函数的执行顺序受父组件的影响,通常遵循**"先创建子组件,后创建父组件;先销毁父组件,后销毁子组件"**的原则。
1. 组件创建(挂载)阶段
当父组件挂载时,子组件的生命周期钩子执行顺序如下:
执行顺序
-
父组件的
beforeCreate
-
父组件的
created
-
父组件的
beforeMount
-
子组件的
beforeCreate
-
子组件的
created
-
子组件的
beforeMount
-
子组件的
mounted
-
父组件的
mounted
说明
-
先创建 父组件的实例 (
beforeCreate
和created
),但此时模板还未编译,子组件还未初始化。 -
在 父组件的
beforeMount
过程中,Vue 发现了子组件标签,于是开始初始化子组件。 -
子组件的
beforeCreate
和created
先执行 ,然后子组件挂载到 DOM,触发mounted
。 -
子组件
mounted
结束后,才执行父组件的mounted
。
2. 组件更新(更新)阶段
当父组件的 data
发生变化,触发重新渲染时,执行顺序如下:
执行顺序
-
父组件的
beforeUpdate
-
子组件的
beforeUpdate
-
子组件的
updated
-
父组件的
updated
说明
-
由于父组件的
data
变更,先触发 父组件的beforeUpdate
。 -
发现子组件的
props
可能也受影响,因此进入 子组件的beforeUpdate
。 -
子组件完成更新后,执行 子组件的
updated
。 -
最后,执行 父组件的
updated
。
3. 组件销毁(卸载)阶段
当父组件被销毁时,子组件的生命周期钩子执行顺序如下:
执行顺序
-
父组件的
beforeDestroy
-
子组件的
beforeDestroy
-
子组件的
destroyed
-
父组件的
destroyed
说明
-
销毁时是"先父后子"调用
beforeDestroy
,但先销毁子组件,再销毁父组件。 -
子组件
beforeDestroy
先执行,随后destroyed
触发。 -
最后执行 父组件的
destroyed
。
总结
完整生命周期执行顺序
阶段 | 父组件 | 子组件 |
---|---|---|
创建前 | beforeCreate |
- |
创建后 | created |
- |
挂载前 | beforeMount |
- |
子组件创建前 | - | beforeCreate |
子组件创建后 | - | created |
子组件挂载前 | - | beforeMount |
子组件挂载后 | - | mounted |
父组件挂载后 | mounted |
- |
更新前 | beforeUpdate |
beforeUpdate |
更新后 | updated |
updated |
销毁前 | beforeDestroy |
beforeDestroy |
销毁后 | destroyed |
destroyed |
核心原则
-
子组件的
beforeCreate
、created
、beforeMount
在父组件beforeMount
之后执行。 -
子组件的
mounted
在父组件mounted
之前执行。 -
子组件的
beforeDestroy
、destroyed
在父组件beforeDestroy
之后执行(即先销毁子组件,再销毁父组件)。
这个顺序对于组件通信、数据流管理等很重要,尤其在 mounted
钩子里可能需要访问子组件的 DOM 或数据时,需要注意时机。
如果你是用 Vue 3,beforeDestroy
和 destroyed
被替换为 onBeforeUnmount
和 onUnmounted
,但执行顺序逻辑仍然一样。