onmounted onbeforemount

onMounted和onBeforeMount是Vue 3中的生命周期钩子函数。

onBeforeMount函数在组件挂载之前被调用，可以用来在组件挂载之前执行一些准备工作。

onMounted函数在组件挂载完成后被调用，可以用来执行一些需要在组件挂载完成后才能进行的操作。

具体来说，当Vue组件实例创建时，会先执行父组件的setup函数，并在其中调用onBeforeMount钩子函数。然后，如果父组件的DOM中有子组件需要挂载，那么父组件会跳转到挂载子组件的过程中。在子组件的setup函数中，同样会先执行onBeforeMount钩子函数。如果子组件的DOM中还有孙组件需要挂载，那么子组件会跳转到挂载孙组件的过程中。

在挂载孙组件之前，孙组件的setup函数中的onBeforeMount钩子函数会被执行。然后，孙组件中的孙子组件也会按照同样的流程进行挂载。孙子组件的挂载顺序会受到同步组件的影响，必须等待同步组件挂载完成后才能挂载。

最终，当所有组件的DOM信息都被放到父容器中并执行了对应的onMounted钩子函数后，整个组件的挂载流程就完成了。

异步组件和<Suspense>树内的组件也可以参与这个挂载流程，但是具体的细节需要根据具体情况来进行分析。

所以，onMounted和onBeforeMount是用来在Vue组件的挂载过程中执行一些操作的钩子函数。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [vue基础 - 24 （vue3 生命周期：onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount、...](https://blog.csdn.net/Janicecat/article/details/121736628)[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^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [Vue3中setup语法糖下的常见生命周期钩子——onMounted和onBeforeMount](https://blog.csdn.net/DM_Cxx/article/details/131066461)[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^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]