清除定時(shí)器，這是在我們開發(fā)項(xiàng)目中常見功能需求

在vue項(xiàng)目中清除定時(shí)器方法時(shí)我們通常會(huì)用到以下兩種方法

方法一

1、首先在vue實(shí)例的data中定義定時(shí)器的名稱：
     exprot defalut {
        data(){
            return{
                    timer:null
             }
  
        },
2、在方法（methods）或者頁面初始化（mounted()）的時(shí)候使用定時(shí)器
         mounted(){
             this.timer = setInterval((){
               console.log('所放內(nèi)容')
              },2000 )
         },
3、然后在頁面銷毀的生命周期函數(shù)（beforeDestroy()）中銷毀定時(shí)器
         beforeDestroy(){
             clearInterval(this.timer)
          },
      }

這是段常見的代碼，但存在幾個(gè)問題

• vue實(shí)例中需要有這個(gè)定時(shí)器的實(shí)例，timer被定義在data里面，實(shí)際上我們不需要他在data里面響應(yīng)操作，反而感覺有點(diǎn)多余,會(huì)造成性能的浪費(fèi)。
• clearInterval 后沒有清空timer為null
• 開啟定時(shí)器和清除定時(shí)器的代碼分散開在兩個(gè)地方可讀性維護(hù)性都在損耗，專業(yè)的說是使得我們比較很難的程序化的清理我們建立的東西。

方法一

export default{
  data(){
    retrun{}
   },
  mounted(){
      let timer = setInterval((){
          console.log('所放內(nèi)容')
      })
    this.$once('hook:berforeDestroy',()=>{
        clearInterval(timer)
        timer = null
    })
  },
  beforeDerstroy(){
    }
}
>在這里使用hook監(jiān)聽beforeDestroy生命周期，這樣timer只需要被定義在生命周期里

beforeDestroy 沒有觸發(fā)？

在后臺(tái)系統(tǒng)中，我們常常會(huì)設(shè)置頁面緩存，而當(dāng)路由被 keep-alive 緩存時(shí)是不走 beforeDestroy 生命周期的，所以有些小伙伴以為在 beforeDestroy 清除定時(shí)器就完事了，甚至都沒有檢查一下，實(shí)際上定時(shí)器并沒有被清除掉。知道了原因也就好解決了，借助 activated 和 deactivated 這兩個(gè)生鉤子：

export default{
  data(){
    retrun{}
   },
  mounted(){
      this.$on('hook:activated', () => {
      if (timer === null) { // 避免重復(fù)開啟定時(shí)器
        timer = setInterval(() => {
          console.log('setInterval')
        }, 2000)
      }
    })
    this.$on('hook:deactivated', () => {
      clearInterval(timer)
      timer = null
    })
}