Vue3生命周期和Vue2生命周期对比

在 Vue 3 中，生命周期钩子函数被重新设计，以提供更清晰和一致的生命周期管理。以下是 Vue 3 生命周期钩子的详细解释，以及它们与 Vue 2 的对比：

1. setup()：

   • 在 Vue 3 中，setup() 是组合式 API 的入口点，它在组件实例化之前执行。在这个钩子中，你可以定义响应式数据（通过 ref、reactive、computed 等）和方法。它取代了 Vue 2 中的 beforeCreate 和 created 钩子。在 setup() 中，你不需要手动创建 this 上的属性，因为它们是通过 setup() 返回的对象直接暴露给模板和子组件。

2. onBeforeMount()：

   • 在组件被挂载到 DOM 之前调用。这个钩子在 setup() 之后执行，允许你在组件挂载之前进行一些准备工作，比如设置 DOM 监听器。

3. onMounted()：

   • 当组件被挂载到 DOM 后调用。这个钩子可以用来执行 DOM 操作，因为此时 DOM 已经可用。

4. onBeforeUpdate()：

   • 在组件更新之前调用，可以用来在更新之前进行一些准备工作。

5. onUpdated()：

   • 在组件更新完成后调用。这个钩子可以用来处理更新后的 DOM 操作。

6. onBeforeUnmount()：

   • 在组件卸载之前调用，可以用来进行清理工作，比如移除事件监听器。

7. onUnmounted()：

   • 在组件完全卸载后调用，此时组件的 DOM 已经被移除，可以用来进行最终的清理工作。

8. onActivated() 和 onDeactivated()：

   • 这两个钩子是针对被包裹在 <keep-alive> 组件中的子组件。onActivated() 在子组件被激活时调用，而 onDeactivated() 在子组件被停用时调用。

9. onErrorCaptured()：

   • 当捕获到一个来自子孙组件的错误时调用。这个钩子可以用来全局处理错误。

与 Vue 2 的对比：

• Vue 2 中的 beforeCreate 和 created 钩子在 Vue 3 中被 setup() 取代。setup() 提供了一种更现代的声明式方法来处理组件的初始化。
• Vue 2 中的 beforeMount、mounted、beforeUpdate、updated、beforeDestroy 和 destroyed 钩子在 Vue 3 中保持不变，但它们的签名有所变化，现在它们接受一个函数而不是一个选项对象。
• Vue 2 中的 activated 和 deactivated 钩子在 Vue 3 中被保留，但它们的用途和行为没有变化。
• Vue 2 中没有 onErrorCaptured() 钩子，这是 Vue 3 新增的用于全局错误处理的钩子。

总的来说，Vue 3 的生命周期钩子设计更加简洁和一致，特别是通过 setup() 函数，它使得组件的逻辑更加清晰，并且更容易与 TypeScript 等类型检查工具集成。