vue3+ts 销毁组件

Vue3中，销毁组件可以通过多种方式实现，这通常涉及到移除DOM元素、取消订阅、停止计时器等清理工作，以确保应用的内存得到正确释放。在Vue3与TypeScript结合使用时，这些操作可以通过Vue的生命周期钩子函数来进行。

1. 使用`onBeforeUnmount`和`unmounted`生命周期钩子：`onBeforeUnmount`钩子函数会在组件卸载前被调用，可以在其中执行清理工作。`unmounted`钩子函数会在组件完全卸载后调用，可以在这里执行一些后续工作。

import { defineComponent, onBeforeUnmount, unmounted } from 'vue';

export default defineComponent({
  setup() {
    // 设置一个定时器
    const timer = setInterval(() => {
      console.log('定时器触发');
    }, 1000);

    // 在组件卸载之前清除定时器
    onBeforeUnmount(() => {
      clearInterval(timer);
    });

    // 组件卸载后执行
    unmounted(() => {
      console.log('组件已卸载');
    });

    // 其他组件逻辑...
  }
});

2. 使用`onMounted`和`onUnmounted`的组合：`onMounted`钩子函数中可以创建定时器、订阅事件等，在`onUnmounted`钩子函数中取消这些操作。

3. 使用`watchEffect`或`watch`来观察响应式数据的变化，并在组件销毁时进行清理。

import { defineComponent, onMounted, onUnmounted, ref, watch } from 'vue';

export default defineComponent({
  setup() {
    const count = ref(0);

    onMounted(() => {
      // 假设有一个计时器需要在组件挂载时启动
      const timer = setInterval(() => {
        count.value++;
      }, 1000);

      // 组件销毁时清除计时器
      onUnmounted(() => {
        clearInterval(timer);
      });
    });

    // 使用watchEffect或watch进行数据监听并进行相应的清理工作
    watch(count, (newValue, oldValue) => {
      console.log(`count changed from ${oldValue} to ${newValue}`);
      // 返回一个清理函数
      return () => {
        console.log('清理工作执行');
      };
    });

    return {
      count,
    };
  }
});