Vue3中的定时器、清除定时器和动态显示当前时间

在Vue3中，我们可以使用JavaScript的setInterval函数来创建定时器，该函数可以在指定的时间间隔内重复执行某个任务。下面是一个简单的示例，演示如何在Vue3中创建一个定时器来动态显示当前时间：

<template>
<div>
<p>当前时间：{{ currentTime }}</p>
</div>
</template>
<script>
export default {
data() {
return {
currentTime: ''
};
},
mounted() {
this.updateTime();
this.timer = setInterval(this.updateTime, 1000); // 每秒更新一次时间
},
beforeDestroy() {
clearInterval(this.timer); // 组件销毁前清除定时器
},
methods: {
updateTime() {
const now = new Date();
this.currentTime = now.toLocaleString(); // 将日期格式化为本地时间字符串
}
}
};
</script>

在上面的示例中，我们首先在data中定义了一个名为currentTime的响应式数据，用于存储当前时间。在mounted钩子函数中，我们调用updateTime方法来初始化当前时间，并使用setInterval函数创建一个定时器，每秒调用一次updateTime方法来更新当前时间。为了避免在组件销毁后仍然执行定时器任务，我们在beforeDestroy钩子函数中调用clearInterval方法来清除定时器。
需要注意的是，在Vue3中，由于使用了Composition API，我们可以使用ref函数来创建响应式引用，并通过getCurrentRef方法获取到这些引用的值。因此，在上述示例中，我们可以将currentTime替换为ref函数创建的响应式引用，并在模板中使用currentTime.value来访问其值。这样可以更好地利用Composition API的优势。