目錄

• 前言
  
• 優化
  
• 衍生問題：beforeDestroy 沒有觸發？
  

前言

清除定時器，相信有相當一部分人是這麼寫的：

export default {
 www.cppcns.com data() {
    reurn {
      timer: null
    }
  },mounted() {
    this.timer = setInterval(() => {
      console.log('setInterval')
    },2000)
  },beforeDestroy() {
    clearInterval(this.timer)
  }
}

這是一段常見的程式碼，至少我身邊的好幾個小夥伴（1-3年經驗的都有）都http://www.cppcns.com

• clearInterval 後沒有清空 timer 為 null。
  
• 開啟定時器和清除定時器的程式碼分散開在兩個地方，有損可讀性/維護性，用尤大大的話說，這使得我們比較難於程式化地清理我們建立的東西。
• timer 被定義在 data 裡，實際上 timer 不需要什麼響應式操作，定義在 data 裡是沒必要的，反而造成效能浪費。

優化

直接上程式碼：

export default {
  data() {
    reurn {
    }
  },mounted() {
    let timer = setInterval(() => RHmMxm
 
{
      console.log('setInterval')
    },2000)
    this.$once('hook:beforeDestroy',() => {
      clearInterval(timer)
      timer = null
    })
  }
}

這裡使用 hook 監聽 beforeDestroy 生命週期，這樣 timer 只需被定義在生命週期裡，以上的問題就全部解決了。

衍生問題：beforeDestroy 沒有觸發？

在後臺系RHmMxm統中，我們常常會設定頁面快取，而當路由被 keep-alive 快取時是不走 beforeDestroy 生命週期的，所以有些小夥伴以為在 beforeDestroy 清除定時器就完事了，甚至都沒有檢查一下，實際上定時器並沒有被清除掉。知道了原因也就好解決了，藉助 activated 和 deactivated 這兩個生鉤子：

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

這裡需要注意一下，由於快取原因，所以需要用 $on 而不是 $once，不然執行一次後就不會再觸發了。

到此這篇關於如何優雅的清除定時器的文章就介紹到這了,更多相關Vue 清除定時器內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！