vue中重复设置定时器导致时间加速

场景

startCount () {
 this.timer = setInterval(() => {
    this.count++
  }, 1000)
},
closeCount () {
  if (this.timer) {
     clearInterval(this.timer)
   }
}

1、在函数startCount中写了一个定时器，调用startCount之后调用closeCount清除该定时器，定时器正常清除了
2、重新调用startCount，忘记调用closeCount清除定时器，再次调用startCount，之前设置定时器没有被清掉，两个定时器（同时存在）重叠导致时间加速。
3、startCount修改为如下，先清除定时器，再添加定时器，就可以了

startCount () {
   this.closeCount()
   this.timer = setInterval(() => {
     this.count++
   }, 1000)
 }

完整的代码案例如下

<template>
  <div>
    <h1>Count page</h1>
    <h3>{{ count }}</h3>
    <Button type="primary" @click="startCount">开始计时</Button>
    <Button type="error" @click="closeCount">关闭计时</Button>
  </div>
</template>
<script>
export default {
  name: 'Count',
  data () {
    return {
      count: 0
    }
  },
  methods: {
    startCount () {
      this.closeCount()
      this.timer = setInterval(() => {
        this.count++
      }, 1000)
    },
    closeCount () {
      if (this.timer) {
        clearInterval(this.timer)
      }
    }
  },
  destroyed () {
    clearInterval(this.timer)
  }
}
</script>