Vue3 定时器|极客教程

Vue3 定时器

在Vue3中，我们经常需要使用定时器来实现一些定时任务或动态更新页面的需求。本文将介绍在Vue3中使用定时器的方法以及常见的应用场景。

setInterval 和 setTimeout

在Vue3中，我们可以使用setInterval和setTimeout这两个JavaScript原生方法来实现定时器的功能。

setInterval

setInterval方法会按照指定的时间间隔重复调用一个函数。其基本语法如下：

let timer = setInterval(function, delay);

其中，function是要执行的函数，delay是时间间隔（以毫秒为单位）。我们可以通过clearInterval方法来清除setInterval创建的定时器：

clearInterval(timer);

setTimeout

setTimeout方法会在指定的时间后执行一次函数。其基本语法如下：

let timer = setTimeout(function, delay);

同样，我们可以通过clearTimeout方法来清除setTimeout创建的定时器：

clearTimeout(timer);

在Vue3中使用定时器

在Vue3中，我们通常在mounted生命周期钩子中使用定时器。下面是一个简单的示例，展示如何在Vue3中使用setInterval方法：

<template>
  <div>
    <p>当前时间：{{ currentTime }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentTime: new Date().toLocaleTimeString()
    };
  },
  mounted() {
    this.timer = setInterval(() => {
      this.currentTime = new Date().toLocaleTimeString();
    }, 1000);
  },
  beforeUnmount() {
    clearInterval(this.timer);
  }
};
</script>

在上面的示例中，我们在mounted生命周期钩子中使用setInterval方法每秒更新当前时间，并在beforeUnmount生命周期钩子中清除定时器。