vue2和vue3的钩子函数执行顺序

Vue2和Vue3的钩子函数执行顺序有一些不同，下面是它们的执行顺序：

Vue2的钩子函数执行顺序：
1. beforeCreate
2. created
3. beforeMount
4. mounted
5. beforeUpdate
6. updated
7. beforeDestroy
8. destroyed

Vue3的钩子函数执行顺序：
1. beforeCreate
2. created
3. onBeforeMount
4. onMounted
5. onBeforeUpdate
6. onUpdated
7. onBeforeUnmount
8. onUnmounted

可以看到，Vue3增加了两个新的钩子函数，分别是`onBeforeUnmount`和`onUnmounted`，用来替代Vue2中的`beforeDestroy`和`destroyed`。同时，Vue3将`beforeMount`和`mounted`拆分成了两个独立的钩子函数。

相关问题

vue2 vue3生命周期钩子函数

在 Vue 中，生命周期钩子函数是一些特定的方法，它们在组件实例的生命周期中自动执行，可以让你在特定阶段执行自定义代码。在 Vue2 中，一共有 8 个生命周期钩子函数，分别是：

1. beforeCreate：在实例被创建之前执行，此时组件的数据、方法等都还未初始化，无法访问。
2. created：在实例创建完成后执行，此时组件的数据已经初始化完成，但 DOM 元素还未生成。
3. beforeMount：在挂载之前执行，此时 DOM 元素还未生成。
4. mounted：在挂载完成后执行，此时 DOM 元素已经生成，可以访问到 DOM 元素。
5. beforeUpdate：在更新之前执行，此时数据已经更新，但 DOM 元素还未重新渲染。
6. updated：在更新完成后执行，此时数据已经更新，DOM 元素也已经重新渲染。
7. beforeDestroy：在销毁之前执行，此时组件实例还存在，可以进行善后工作。
8. destroyed：在销毁之后执行，此时组件实例已经被销毁，无法访问。

在 Vue3 中，由于引入了 Composition API，生命周期钩子函数发生了一些变化。Vue3 提供了一个新的 API `onBeforeMount` 和 `onMounted` 取代了 Vue2 中的 `beforeMount` 和 `mounted`；同时提供了 `onBeforeUpdate` 和 `onUpdated` 取代了 Vue2 中的 `beforeUpdate` 和 `updated`；还提供了 `onBeforeUnmount` 和 `onUnmounted` 取代了 Vue2 中的 `beforeDestroy` 和 `destroyed`。除此之外，Vue3 还提供了三个新的生命周期钩子函数：

1. onBeforeUnmount：在卸载组件之前执行。
2. onRenderTracked：在组件中有依赖项被追踪时执行。
3. onRenderTriggered：在组件中有追踪的依赖项被触发更新时执行。

vue2和vue3生命周期钩子函数

Vue 2和Vue 3都有一些常用的生命周期钩子函数，但在Vue 3中有一些变化。以下是Vue 2和Vue 3中常用的生命周期钩子函数：

Vue 2中的生命周期钩子函数：
1. beforeCreate: 实例创建之前调用，此时数据观测（data observer）和事件配置（event/watcher）尚未初始化。
2. created: 实例创建完成后调用，此时已经完成了数据观测（data observer）和事件配置（event/watcher）。
3. beforeMount: 在挂载之前调用，在这个时候模板已经编译完成，但是还未挂载到页面中。
4. mounted: 在挂载完成后调用，此时组件已经被挂载到页面中，可以访问到DOM元素。
5. beforeUpdate: 在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。
6. updated: 在数据更新之后调用，发生在虚拟DOM重新渲染和打补丁之后。
7. beforeDestroy: 在实例销毁之前调用，此时实例仍然完全可用。
8. destroyed: 在实例销毁之后调用，此时实例已经被销毁，所有的事件监听器和子实例都被删除。

Vue 3中的生命周期钩子函数：
1. beforeCreate: 与Vue 2相同，在实例创建之前调用。
2. created: 与Vue 2相同，在实例创建完成后调用。
3. beforeMount: 与Vue 2相同，在挂载之前调用。
4. mounted: 与Vue 2相同，在挂载完成后调用。
5. beforeUpdate: 与Vue 2相同，在数据更新之前调用。
6. updated: 与Vue 2相同，在数据更新之后调用。
7. beforeUnmount: 在组件卸载之前调用，此时组件仍然完全可用。
8. unmounted: 在组件卸载之后调用，此时组件已经被卸载，所有的事件监听器和子组件都被删除。