vue3中onUnmounted详解

在 Vue 3 中，onUnmounted 是一个生命周期钩子，它会在组件实例被卸载（unmounted）和销毁之前被调用。这个钩子特别有用，因为它允许你在组件卸载时执行一些清理工作，比如取消定时器、移除事件监听器、清理手动创建的 DOM 元素等。

使用 onUnmounted

在 Vue 3 的 Composition API 中，你可以使用 onUnmounted 钩子来定义组件卸载时需要执行的代码。下面是一个简单的例子：

import { onUnmounted, ref } from 'vue';

export default {
  setup() {
    const timer = ref(null);

    // 启动一个定时器
    onMounted(() => {
      timer.value = setInterval(() => {
        console.log('Timer is running...');
      }, 1000);
    });

    // 在组件卸载时清除定时器
    onUnmounted(() => {
      clearInterval(timer.value);
    });

    return {
      // ...其他响应式数据和方法
    };
  },
};

在这个例子中，我们在 onMounted 钩子中启动了一个定时器，并在 onUnmounted 钩子中清除了它。这样，当组件被卸载时，定时器也会被停止，避免了不必要的内存消耗和潜在的错误。

注意事项

• 确保在 onUnmounted 中清理所有在组件生命周期中创建的资源，以避免内存泄漏。
• 如果你的组件使用了第三方库或插件，请查阅相关文档以了解是否有特定的清理步骤需要在组件卸载时执行。
• onUnmounted 只在组件卸载时执行一次，所以如果你需要多次执行某些操作，请确保在组件内部适当地管理它们。

与 Options API 的对比

在 Vue 2 的 Options API 中，类似的清理工作通常在 beforeDestroy 或 destroyed 生命周期钩子中进行。然而，在 Vue 3 的 Composition API 中，onUnmounted 提供了更灵活和模块化的方式来处理组件卸载时的逻辑。