vue中定时器的销毁和创建

一、准备工作
1.1、数据源定义

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

1.2、封装清除定时器方法

clearTimer () {
    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()
      })
    },

转自：扶得一人醉如苏沐晨
链接：https://www.jianshu.com/p/7e5268452947
来源：简书