在 Vue 裏如何優雅的清除一個定時器？

「本文已參與好文召集令活動，點擊查看後端、大前端雙賽道投稿，2萬元獎池等你挑戰！」

前言

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

export default {
  data() {
    return {
      timer: null
    }
  },
  
  mounted() {
    this.timer = setInterval(() => {
      console.log('setInterval')
    }, 2000)
  },
  
  beforeDestroy() {
    clearInterval(this.timer)
  }
}
複製代碼

這是一段常見的代碼，至少我身邊的好幾個小夥伴（1-3年經驗的都有）都是這麼寫的，這裏存在3個不優雅的問題：

• clearInterval 後沒有清空 timer 爲 null。
• 開啓定時器和清除定時器的代碼分散開在兩個地方，有損可讀性/維護性，用尤大大的話說，這使得咱們比較難於程序化地清理咱們創建的東西。
• timer 被定義在 data 裏，實際上 timer 不須要什麼響應式操做，定義在 data 裏是不必的，反而形成性能浪費。

優化

直接上代碼：

export default {
  data() {
    return {
    }
  },
  
  mounted() {
    let timer = setInterval(() => {
      console.log('setInterval')
    }, 2000)
    this.$once('hook:beforeDestroy', () => {
      clearInterval(timer)
      timer = null
    })
  }
}
複製代碼

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

衍生問題：beforeDestroy 沒有觸發？

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

export default {
  data() {
    return {
    }
  },
  
  mounted() {
    let 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，否則執行一次後就不會再觸發了。

感謝

感謝你的閱讀，若是本文對你有什麼幫助，別忘了點贊支持一下❤️。

本文若是有什麼錯誤或不足，歡迎評論區指正。