Vue清除定時器的代碼怎么寫

這篇文章主要介紹了Vue清除定時器的代碼怎么寫的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇Vue清除定時器的代碼怎么寫文章都會有所收獲，下面我們一起來看看吧。

前言

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

export default {
  data() {
    reurn {
      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() {
    reurn {
    }
  },
  
  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() {
    reurn {
    }
  },
  
  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，不然執行一次后就不會再觸發了。

關于“Vue清除定時器的代碼怎么寫”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“Vue清除定時器的代碼怎么寫”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。