一、准备工作

1.1、数据源定义

data () {
    return {
      timer: ''
    }
  },

1.2、封装清除定时器方法

 clearTimer () {
    this.timer && clearInterval(this.timer)
 }

这里解释一下

  this.timer && clearInterval(this.timer)
  等价于-----------------------------------
  if(this.timer) clearInterval(this.timer)

二、方式一

2.2、使用

   setTimer () {
      // 调用之前先清除一遍定时器
      this.clearTimer()
      this.timer = setInterval(() => {
      }, 1000)
    },

2.3、销毁

beforeDestroy () {
    this.clearTimer()
}

三、方式二

 setTimer () {
      // 调用之前先清除一遍定时器
      this.clearTimer()
      // 调用之前先清除一遍定时器
      this.timer = setInterval(() => 
      }, 1000)
      this.$once('hook:beforeDestroy', () => {
        this.clearTimer()
      })
    },

四、注意

被包含在 keep-alive 中创建的组件，会多出两个生命周期的钩子: activated 、deactivated
activated是当 keepalive 包含的组件再次渲染的时候触发
deactivated是当 keepalive 包含的组件销毁的时候触发
被缓存的组件是不会走beforeDestroy生命周期的
这个时候就要使用 deactivated生命周期去销毁定时器

4.1、方式一销毁

deactivated() {
    this.clearTimer()
}

4.1、方式二销毁

 setTimer () {
      // 调用之前先清除一遍定时器
      this.clearTimer()
      // 调用之前先清除一遍定时器
      this.timer = setInterval(() => 
      }, 1000)
      this.$once('hook:deactivated', () => {
        this.clearTimer()
      })
    },