引导者

## destroyed() 已成往事：Vue 3 生命周期钩子详解### 简介在 Vue.js 2 中，`destroyed` 生命周期钩子是我们在组件销毁前执行清理工作（例如移除事件监听器、清除定时器等）的主要手段。然而，随着 Composition API 的引入和 Vue 3 的发布，`destroyed` 钩子以及它的兄弟钩子 `beforeDestroy` 已被弃用。这篇文章将详细介绍 Vue 3 中如何处理组件销毁以及如何优雅地迁移旧代码。### Vue 3 中的替代方案：onBeforeUnmount 和 onUnmountedVue 3 推出了 `onBeforeUnmount` 和 `onUnmounted` 这两个新的生命周期钩子，分别对应 `beforeDestroy` 和 `destroyed`。它们都是 Composition API 的一部分，需要在 `setup()` 函数内部使用。#### onBeforeUnmount

在组件实例卸载之前同步调用。此时，组件实例仍然完全可用。

主要用于执行一些需要在组件卸载前完成的操作，例如：

向服务器发送最终数据

清除与其他库的集成#### onUnmounted

在组件实例卸载后同步调用。此时，组件实例的 DOM 结构已被销毁。

主要用于清理工作，例如：

移除事件监听器

清除定时器

取消订阅### 代码示例：从 destroyed 迁移到 onUnmounted假设我们有一个 Vue 2 组件，在 `created` 钩子中创建了一个定时器，并在 `destroyed` 钩子中清除了它：```vue // Vue 2 组件 export default {created() {this.timer = setInterval(() => {// ...}, 1000);},destroyed() {clearInterval(this.timer);}, }; ```在 Vue 3 中，我们可以使用 `onMounted` 和 `onUnmounted` 来实现相同的功能：```vue // Vue 3 组件 import { onMounted, onUnmounted } from 'vue';export default {setup() {let timer;onMounted(() => {timer = setInterval(() => {// ...}, 1000);});onUnmounted(() => {clearInterval(timer);});}, }; ```### 总结Vue 3 中弃用 `destroyed` 钩子是为了推动开发者使用更简洁、更易于理解的 Composition API。`onBeforeUnmount` 和 `onUnmounted` 提供了更清晰的生命周期管理方式，并使代码更易于维护。建议所有 Vue 开发者尽快熟悉并采用这些新的钩子函数。

destroyed() 已成往事：Vue 3 生命周期钩子详解

简介在 Vue.js 2 中，`destroyed` 生命周期钩子是我们在组件销毁前执行清理工作（例如移除事件监听器、清除定时器等）的主要手段。然而，随着 Composition API 的引入和 Vue 3 的发布，`destroyed` 钩子以及它的兄弟钩子 `beforeDestroy` 已被弃用。这篇文章将详细介绍 Vue 3 中如何处理组件销毁以及如何优雅地迁移旧代码。

Vue 3 中的替代方案：onBeforeUnmount 和 onUnmountedVue 3 推出了 `onBeforeUnmount` 和 `onUnmounted` 这两个新的生命周期钩子，分别对应 `beforeDestroy` 和 `destroyed`。它们都是 Composition API 的一部分，需要在 `setup()` 函数内部使用。

onBeforeUnmount* 在组件实例卸载之前同步调用。此时，组件实例仍然完全可用。 * 主要用于执行一些需要在组件卸载前完成的操作，例如：* 向服务器发送最终数据* 清除与其他库的集成

onUnmounted* 在组件实例卸载后同步调用。此时，组件实例的 DOM 结构已被销毁。 * 主要用于清理工作，例如：* 移除事件监听器* 清除定时器* 取消订阅

代码示例：从 destroyed 迁移到 onUnmounted假设我们有一个 Vue 2 组件，在 `created` 钩子中创建了一个定时器，并在 `destroyed` 钩子中清除了它：```vue // Vue 2 组件 export default {created() {this.timer = setInterval(() => {// ...}, 1000);},destroyed() {clearInterval(this.timer);}, }; ```在 Vue 3 中，我们可以使用 `onMounted` 和 `onUnmounted` 来实现相同的功能：```vue // Vue 3 组件 import { onMounted, onUnmounted } from 'vue';export default {setup() {let timer;onMounted(() => {timer = setInterval(() => {// ...}, 1000);});onUnmounted(() => {clearInterval(timer);});}, }; ```

总结Vue 3 中弃用 `destroyed` 钩子是为了推动开发者使用更简洁、更易于理解的 Composition API。`onBeforeUnmount` 和 `onUnmounted` 提供了更清晰的生命周期管理方式，并使代码更易于维护。建议所有 Vue 开发者尽快熟悉并采用这些新的钩子函数。