vue中使用定时器

在 Vue 中使用定时器可以通过两种方式实现：

1. 使用 setInterval() 函数

在 Vue 组件中可以通过 mounted() 生命周期函数启动定时器，然后在定时器中执行需要执行的操作。

下面是一个例子：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        message: 'Hello, Vue!'
      }
    },
    mounted() {
      setInterval(() => {
        this.message = 'Hello, Vue! ' + new Date().toLocaleString();
      }, 1000);
    }
  }
</script>

2. 使用 Vue 定时器

Vue 提供了 $interval() 方法，可以在组件中使用该方法实现定时器。

下面是一个例子：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        message: 'Hello, Vue!'
      }
    },
    created() {
      this.timer = this.$interval(() => {
        this.message = 'Hello, Vue! ' + new Date().toLocaleString();
      }, 1000);
    },
    destroyed() {
      this.$clearInterval(this.timer);
    }
  }
</script>

需要注意的是，使用 Vue 定时器时需要在组件销毁前清除定时器，否则可能会导致内存泄漏等问题。在上面的例子中，在组件销毁前通过 $clearInterval() 方法清除定时器。