vue 如何更好的清除定时器

清除定时器，这是在我们开发项目中常见功能需求

在vue项目中清除定时器方法时我们通常会用到以下两种方法

方法一

1、首先在vue实例的data中定义定时器的名称：
     exprot defalut {
        data(){
            return{
                    timer:null
             }
  
        },
2、在方法（methods）或者页面初始化（mounted()）的时候使用定时器
         mounted(){
             this.timer = setInterval((){
               console.log('所放内容')
              },2000 )
         },
3、然后在页面销毁的生命周期函数（beforeDestroy()）中销毁定时器
         beforeDestroy(){
             clearInterval(this.timer)
          },
      }

这是段常见的代码，但存在几个问题

• vue实例中需要有这个定时器的实例，timer被定义在data里面，实际上我们不需要他在data里面响应操作，反而感觉有点多余,会造成性能的浪费。
• clearInterval 后没有清空timer为null
• 开启定时器和清除定时器的代码分散开在两个地方可读性维护性都在损耗，专业的说是使得我们比较很难的程序化的清理我们建立的东西。

方法一

export default{
  data(){
    retrun{}
   },
  mounted(){
      let timer = setInterval((){
          console.log('所放内容')
      })
    this.$once('hook:berforeDestroy',()=>{
        clearInterval(timer)
        timer = null
    })
  },
  beforeDerstroy(){
    }
}
>在这里使用hook监听beforeDestroy生命周期，这样timer只需要被定义在生命周期里

beforeDestroy 没有触发？

在后台系统中，我们常常会设置页面缓存，而当路由被 keep-alive 缓存时是不走 beforeDestroy 生命周期的，所以有些小伙伴以为在 beforeDestroy 清除定时器就完事了，甚至都没有检查一下，实际上定时器并没有被清除掉。知道了原因也就好解决了，借助 activated 和 deactivated 这两个生钩子：

export default{
  data(){
    retrun{}
   },
  mounted(){
      this.$on('hook:activated', () => {
      if (timer === null) { // 避免重复开启定时器
        timer = setInterval(() => {
          console.log('setInterval')
        }, 2000)
      }
    })
    this.$on('hook:deactivated', () => {
      clearInterval(timer)
      timer = null
    })
}