Vue中使用定时器(setInterval、setTimeout)的两种方式

Vue是一款流行的JavaScript前端框架，开发者常常需要在Vue中使用定时器，来实现许多不同的功能，例如：轮播图、自动刷新等等。Vue中有两种主要的方式可以使用定时器：基础绑定方式和组件方法。

基础绑定方式

基础绑定方式是通过Vue自带的指令v-bind实现的，一般选择setTimeout的方式。语法如下：

<template>
  <div>
    // 点击按钮后开始定时器
    <button v-on:click="startTimer">开始定时器</button>
    // 显示倒计时
    <p>剩余时间：{{count}}</p>
  </div>
</template>

<script>
  export default {
    name: 'MyComponent',
    data () {
      return {
        count: 10 // 初始计数值
      }
    },
    methods: {
      startTimer() {
        let timer = setInterval(() => {
          this.count--
          if(this.count === 0) {
            clearInterval(timer) // 停止计时器
          }
        },1000)
      }
    }
  }
</script>

以上代码中，我们定义了一个名为MyComponent的Vue组件。在组件中，我们使用v-on指令添加了一个点击事件监听器，一旦点击事件发生，MyComponent组件中的startTimer方法会被调用。

startTimer方法中，我们使用setInterval方法创建一个计时器。计时器每隔1000毫秒就会对计数值减一，如果计数值减到了0，计时器就会停止。在组件的模板中，我们使用Mustache语法插值绑定了计数值。

组件方法

组件方法是在Vue组件内部使用JavaScript函数的方式，用来完成组件特定的功能。在组件methods中使用的setInterval语法与上述基础绑定方式类似，只是调用的方法名不同。以下是例子：

<template>
  <div>
    <button v-on:click="startTimer">开始定时器</button>
    <p>剩余时间：{{count}}</p>
  </div>
</template>

<script>
  export default {
    name: 'MyComponent',
    data () {
      return {
        count: 10 // 初始计数值
      }
    },
    methods: {
      startTimer() {
        this.timer = setInterval(this.countDown, 1000)
      },
      countDown() {
        this.count--
        if(this.count === 0) {
          clearInterval(this.timer)
        }
      }
    }
  }
</script>

以上代码与基础绑定方式的实现方法有些许不同。和上面的实现不同，这里我们定义了两个函数，startTimer和countDown，前者在按钮点击时被调用，后者则是定时器的执行函数。当按钮被点击时，startTimer方法会调用countDown方法，同时将其作为setInterval函数的参数，启动计时器。同样的，在countDown方法中，当计数值为0时，会停止计时器。

注意：在Vue组件中调用定时器时，需要注意内存泄漏的问题。因此在组件销毁时，一定要确保清除计时器，正确地释放内存。可以在vue的beforeDestroy生命周期函数中使用clearInterval清除计时器。

以上是Vue中使用定时器的两种方式的完整攻略。掌握这两种定时器的使用方式，可以很好地实现Vue组件中的不同的功能。