Vue 父组件和子组件生命周期执行顺序

最新推荐文章于 2025-09-05 16:27:46 发布

原创最新推荐文章于 2025-09-05 16:27:46 发布 · 1.3k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

vue 专栏收录该内容

30 篇文章

订阅专栏

本文详细阐述了Vue中组件的加载、更新和销毁过程，包括父子组件间的交互顺序。重点介绍了beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy及destroyed等生命周期钩子函数的执行顺序，对于理解组件状态管理和优化有重要指导意义。

1）加载渲染过程
父先创建，才能有子；子创建完成，父才完整。
顺序：父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted

2）子组件更新过程
a)子组件更新影响到父组件的情况。
顺序：父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated

b)子组件更新不影响到父组件的情况。
顺序：子 beforeUpdate -> 子 updated

3）父组件更新过程
a)父组件更新影响到子组件的情况。
顺序：父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated

b)父组件更新不影响到子组件的情况。
顺序：父 beforeUpdate -> 父 updated

4）销毁过程
顺序：父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed