vue3中onUnmounted详解

onUnmounted 是 Vue 3 中的生命周期钩子，它在组件实例被卸载时触发。这个钩子函数通常用于执行一些清理工作，比如取消定时器、解除事件监听器或者清理任何由组件创建的副作用。

下面是一个简单的例子，演示如何在组件卸载时使用 onUnmounted 钩子：

<template>
  <div>{{ count }}</div>
</template>
 
<script>
import { ref, onMounted, onUnmounted } from 'vue';
 
export default {
  setup() {
    const count = ref(0);
 
    // 模拟一个定时器，在组件挂载时启动
    let intervalId = null;
    onMounted(() => {
      intervalId = setInterval(() => {
        count.value++;
      }, 1000);
    });
 
    // 当组件卸载时，清除定时器
    onUnmounted(() => {
      clearInterval(intervalId);
    });
 
    return { count };
  }
};
</script>

在这个例子中，我们有一个简单的计数器，它每秒增加。当组件被销毁时，我们调用 onUnmounted 钩子来清除计时器，防止内存泄漏。