vue3生命周期执行顺序
时间: 2023-07-05 10:35:21 浏览: 117
vue3+ts (源码+笔记+生命周期截图)
在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` 钩子函数。
阅读全文