vue3onMounted 在父子组件的执行顺序

`onMounted` 是 Vue 3 中的一个生命周期钩子函数，它会在组件挂载后立即执行。在父子组件中，`onMounted` 的执行顺序是先父组件再子组件。

具体来说，当父组件挂载后会触发父组件的 `onMounted` 函数，然后才会触发子组件的 `onMounted` 函数。

举个例子，假设有一个父组件和一个子组件，父组件中包含了子组件的引用：

<template>
  <div>
    <child-component></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  mounted() {
    console.log('Parent mounted')
  }
}
</script>

那么在这个例子中，当这个父组件被挂载后，会先打印出 "Parent mounted"，然后才会触发子组件的 `onMounted` 函数。

如果你想更深入地了解 Vue 3 的生命周期钩子函数，可以查看官方文档：https://v3.vuejs.org/guide/instance.html#lifecycle-hooks

相关问题

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

在Vue3中，父子组件生命周期的执行顺序与Vue2有些不同。下面是Vue3中父子组件生命周期的执行顺序：

1. 父组件beforeCreate
2. 父组件setup
3. 父组件created
4. 子组件beforeCreate
5. 子组件setup
6. 子组件created
7. 子组件beforeMount
8. 子组件onBeforeMount
9. 父组件beforeMount
10. 父组件onBeforeMount
11. 子组件mounted
12. 子组件onMounted
13. 父组件mounted
14. 父组件onMounted
15. 子组件beforeUpdate
16. 子组件onBeforeUpdate
17. 父组件beforeUpdate
18. 父组件onBeforeUpdate
19. 子组件updated
20. 子组件onUpdated
21. 父组件updated
22. 父组件onUpdated
23. 子组件beforeUnmount
24. 子组件onBeforeUnmount
25. 父组件beforeUnmount
26. 父组件onBeforeUnmount
27. 子组件unmounted
28. 子组件unmounted

需要注意的是，在Vue3中，父组件的 `beforeMount` 和 `onBeforeMount` 钩子函数会在子组件的对应钩子函数之前执行，而在Vue2中，是先执行子组件的 `beforeMount` 钩子函数，再执行父组件的 `beforeMount` 钩子函数。

Vue父子组件执行顺序

Vue父子组件的执行顺序可以分为创建阶段和销毁阶段。

在创建阶段，父组件的执行顺序是：beforeCreate -> created -> beforeMount。而子组件的执行顺序是：beforeCreate -> created -> beforeMount -> mounted。可以看出，在父组件和子组件的创建阶段中，父组件会先于子组件执行。

在销毁阶段，执行顺序是：beforeDestroy -> destroyed。在父组件销毁时，会先执行父组件的beforeDestroy钩子函数，然后再执行子组件的beforeDestroy和destroyed钩子函数，最后才执行父组件的destroyed钩子函数。可以看出，在销毁阶段中，子组件会在父组件之前被销毁。

综上所述，Vue父子组件的执行顺序可以总结为：父组件的生命周期钩子函数会在子组件之前执行，而在销毁阶段，子组件会在父组件之前被销毁。 <span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [vue 父子组件生命周期执行顺序](https://blog.csdn.net/m0_62012366/article/details/124064289)[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: 50%"]
- *3* [深入理解Vue父子组件生命周期执行顺序及钩子函数](https://download.csdn.net/download/weixin_38723691/12954213)[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: 50%"]
[ .reference_list ]