vue3生命周期顺序

在Vue 3中，生命周期钩子函数的顺序如下：

1. `beforeCreate`：在实例初始化之后，但是在数据观测和事件配置之前调用。
2. `created`：在实例创建完成后立即调用，此时实例已经完成数据观测、属性和方法的运算，但是尚未挂载到DOM中。
3. `beforeMount`：在挂载开始之前被调用，在这个阶段，模板编译已经完成，但是尚未将渲染结果挂载到DOM中。
4. `mounted`：在挂载完成后被调用，此时实例已经被挂载到DOM中。
5. `beforeUpdate`：在数据更新之前被调用，发生在虚拟DOM重新渲染和打补丁之前。
6. `updated`：在数据更新之后被调用，发生在虚拟DOM重新渲染和打补丁之后。
7. `beforeUnmount`：在卸载之前被调用，在这个阶段，实例仍然完全可用。
8. `unmounted`：在卸载之后被调用，此时实例已经从DOM中卸载，所有的事件监听器和子实例也都被销毁。

值得注意的是，在Vue 3中，已经移除了一些不常用的生命周期钩子函数，如`beforeDestroy`和`destroyed`，取而代之的是更加明确的`beforeUnmount`和`unmounted`。此外，Vue 3还引入了`onRenderTracked`和`onRenderTriggered`这两个新的生命周期钩子函数，用于在开发过程中对组件的渲染行为进行追踪和调试。

相关问题

vue3生命周期执行顺序

在Vue3中，组件的生命周期函数被重命名为钩子函数，并且有了一些新的钩子函数。下面是Vue3中组件的钩子函数执行顺序：

1. `beforeCreate`: 组件实例刚被创建，数据观测和事件配置之前调用。
2. `setup`: 在组件实例创建之后，数据观测和事件配置之前调用。它接收 `props`，并返回一个渲染函数以及其它的一些响应式数据。
3. `created`: 组件实例创建完成，数据观测和事件配置完成之后调用。
4. `beforeMount`: 在组件挂载到DOM之前调用。
5. `onBeforeMount`: 在组件挂载到DOM之前调用，与 `beforeMount` 同时只会执行其中一个。
6. `mounted`: 在组件挂载到DOM之后调用。
7. `onMounted`: 在组件挂载到DOM之后调用，与 `mounted` 同时只会执行其中一个。
8. `beforeUpdate`: 在组件更新之前调用，但是在数据更新之前。
9. `onBeforeUpdate`: 在组件更新之前调用，但是在数据更新之前，与 `beforeUpdate` 同时只会执行其中一个。
10. `updated`: 在组件更新之后调用，但是在DOM重新渲染之前。
11. `onUpdated`: 在组件更新之后调用，但是在DOM重新渲染之前，与 `updated` 同时只会执行其中一个。
12. `beforeUnmount`: 在组件卸载之前调用。
13. `onBeforeUnmount`: 在组件卸载之前调用，与 `beforeUnmount` 同时只会执行其中一个。
14. `unmounted`: 在组件卸载之后调用。

需要注意的是，在Vue3中，`beforeDestroy` 和 `destroyed` 钩子函数已经被移除了。取而代之的是 `beforeUnmount` 和 `unmounted` 钩子函数。

vue的生命周期顺序

Vue的生命周期分为八个阶段，按照顺序为：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。在beforeCreate阶段，实例已经初始化完成，但还不能使用响应式数据。在created阶段，可以访问到this，并可以调用异步的方法去获取后台的数据。在beforeMount阶段，可以访问到DOM结构，并对DOM结构进行一些增删改查的操作。在mounted阶段，DOM结构已经渲染完成并挂载在Vue实例上面了。当data发生变化时，会触发beforeUpdate和updated方法。在执行destroyed方法后，对data的改变不会再触发生命周期函数，说明此时Vue实例已经解除了事件监听以及与DOM的绑定，但是DOM结构依然存在。

对于父子组件的生命周期顺序，加载渲染过程为：父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted。子组件更新过程为：父beforeUpdate->子beforeUpdate->子updated->父updated。父组件更新过程为：父beforeUpdate->父updated。销毁过程为：父beforeDestroy->子beforeDestroy->子destroyed->父destroyed。

另外，在beforeCreate阶段进行数据侦听和事件/侦听器的配置之前同步调用，此时还不能使用响应式数据。子组件的生命周期顺序为：son beforeCreate->son created->son beforeMount->son mounted->father mounted。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [理解vue生命周期以及父子组件的生命周期顺序](https://blog.csdn.net/weixin_53474595/article/details/128482218)[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%"]
- *2* *3* [Vue生命周期执行顺序(大白话)](https://blog.csdn.net/weixin_48099727/article/details/126905614)[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 ]