vue3销毁事件钩子函数的使用方法

在 Vue3 中，销毁事件钩子函数被称为 `unmounted`。它会在组件实例被销毁之前调用。下面是使用 `unmounted` 钩子函数的示例：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="stopTimer">Stop Timer</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const message = ref('Hello, World!');
    const timer = setInterval(() => {
      message.value = `The time is ${new Date().toLocaleTimeString()}`;
    }, 1000);

    function stopTimer() {
      clearInterval(timer);
    }

    return {
      message,
      stopTimer,
      unmounted() {
        clearInterval(timer);
      },
    };
  },
};
</script>

在上面的示例中，我们创建了一个计时器来更新 `message` 变量中的消息。当用户单击 "Stop Timer" 按钮时，我们使用 `clearInterval` 函数停止计时器。

而在 `setup` 函数中，我们使用 `return` 语句来返回一个包含 `message`、`stopTimer` 和 `unmounted` 属性的对象。当组件实例被销毁时，`unmounted` 钩子函数会被调用，我们在其中停止计时器。

请注意，`unmounted` 钩子函数只能在 `setup` 函数中使用。如果你需要在 `options` API 中使用销毁事件钩子函数，可以使用 `beforeUnmount`。