vue3父子组件生命周期

在Vue3中，父子组件的生命周期钩子的调用顺序如下：

1. 父组件beforeCreate
2. 父组件created
3. 父组件beforeMount
4. 子组件beforeCreate
5. 子组件created
6. 子组件beforeMount
7. 子组件mounted
8. 父组件mounted
9. 子组件beforeUpdate
10. 父组件beforeUpdate
11. 子组件updated
12. 父组件updated
13. 子组件beforeUnmount
14. 父组件beforeUnmount
15. 子组件unmounted
16. 父组件unmounted

在这个过程中，父组件的生命周期钩子会在子组件的钩子之前执行。父组件的生命周期钩子在父组件的模板渲染之前执行，而子组件的生命周期钩子在子组件的模板渲染之前执行。

需要注意的是，Vue3中的组件生命周期钩子名称发生了一些改变，例如beforeMount改为了beforeInit，mounted改为了onMounted，beforeDestroy改为了beforeUnmount。同时，Vue3还引入了一些新的生命周期钩子，onUpdated、onRenderTriggered、onRenderTracked等。

以上是父子组件生命周期钩子的基本执行顺序，具体的调用顺序可能会因为组件的嵌套关系和实际业务逻辑而有所不同。

相关问题

vue3 父子组件生命周期

在Vue3中，父子组件的生命周期包括以下几个阶段：
- 父组件beforeCreate：组件实例被创建之前的钩子函数。
- 父组件created：组件实例被创建之后的钩子函数，但是还未挂载到DOM上。
- 父组件beforeMount：组件即将被挂载到DOM上的钩子函数。
- 子组件beforeCreate：子组件实例被创建之前的钩子函数。
- 子组件created：子组件实例被创建之后的钩子函数，但是还未挂载到DOM上。
- 子组件beforeMount：子组件即将被挂载到DOM上的钩子函数。
- 子组件mounted：子组件已经被挂载到DOM上的钩子函数。
- 父组件mounted：父组件已经被挂载到DOM上的钩子函数。
- 父组件beforeUpdate：父组件数据更新之前的钩子函数。
- 子组件beforeUpdate：子组件数据更新之前的钩子函数。
- 子组件updated：子组件数据更新之后的钩子函数。
- 父组件updated：父组件数据更新之后的钩子函数。
- 父组件beforeUnmount：组件即将被销毁之前的钩子函数。
- 子组件beforeUnmount：子组件即将被销毁之前的钩子函数。
- 子组件unmounted：子组件已经被销毁的钩子函数。
- 父组件unmounted：父组件已经被销毁的钩子函数。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [Vue3 --父子组件生命周期](https://blog.csdn.net/m0_47901007/article/details/118763279)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *2* [Vue——父子组件的生命周期（执行顺序）](https://blog.csdn.net/leilei__66/article/details/118699960)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *3* [计算机程序设计语言课程设计(VUE.js)及实践项目的例子.txt](https://download.csdn.net/download/weixin_44609920/88236928)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
[ .reference_list ]

vue3 父子组件生命周期关系

Vue3 的父子组件生命周期关系与 Vue2 相似，但有一些区别。在 Vue3 中，父组件的 `onBeforeMount` 和 `onMounted` 钩子函数会先于子组件执行。在子组件的 `onBeforeMount` 和 `onMounted` 钩子函数执行之前，父组件的 `setup` 函数已经执行完毕，因此父组件可以通过 `props` 向子组件传递数据。

在父组件的生命周期中，`onBeforeUpdate` 和 `onUpdated` 钩子函数也会在子组件的生命周期之前执行。在子组件的生命周期中，`onBeforeUnmount` 和 `onUnmounted` 钩子函数会在父组件的生命周期之后执行。

总的来说，父子组件的生命周期执行顺序如下：

1. 父组件 `setup`
2. 父组件 `onBeforeMount`
3. 子组件 `setup`
4. 子组件 `onBeforeMount`
5. 子组件 `onMounted`
6. 父组件 `onMounted`
7. 父组件 `onBeforeUpdate`
8. 子组件 `onBeforeUpdate`
9. 子组件 `onUpdated`
10. 父组件 `onUpdated`
11. 父组件 `onBeforeUnmount`
12. 子组件 `onBeforeUnmount`
13. 子组件 `onUnmounted`
14. 父组件 `onUnmounted`