vue3定时器，vue3清除定时器，vue3动态显示当前时间

在Vue 3中，你可以使用Composition API中的ref和onMounted、onUnmounted生命周期钩子来设置和清除定时器。以下是一个示例，展示了如何在Vue 3组件中动态显示当前时间：

<template>
  <div>
    当前时间: {{ currentTime }}
  </div>
</template>
 
<script>
import { ref, onMounted, onUnmounted } from 'vue';
 
export default {
  setup() {
    const currentTime = ref(new Date().toLocaleTimeString());
    const timer = ref(null);
 
    const updateTime = () => {
      currentTime.value = new Date().toLocaleTimeString();
    };
 
    onMounted(() => {
      timer.value = setInterval(updateTime, 1000);
    });
 
    onUnmounted(() => {
      if (timer.value) {
        clearInterval(timer.value);
      }
    });
 
    return {
      currentTime,
    };
  },
};
</script>

在这个例子中，我们使用setup函数来创建响应式数据currentTime，并且在onMounted钩子中设置了一个定时器，每秒更新当前时间。在onUnmounted钩子中，我们清除了定时器，以防止在组件卸载后发生内存泄漏。