Vue 中 setInterval 定时器的销毁和创建

1.在data种定义 timer 数据源 用来接收定时器

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

2、封装清除定时器方法

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

二、使用

方法一

1.使用

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

2.销毁

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生命周期去销毁定时器

3.1销毁

deactivated() {
    
    
    this.clearTimer()
}

3.2销毁

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