快捷導(dǎo)航

Vue如何優(yōu)雅的清除定時(shí)器

更新時(shí)間：2021年07月22日 11:38:05 作者：8號(hào)的凌晨4點(diǎn)

定時(shí)器如果不及時(shí)合理地清除，會(huì)造成業(yè)務(wù)邏輯混亂甚至應(yīng)用卡死的情況，這個(gè)時(shí)就需要清除定時(shí)器，本文就介紹了Vue如何優(yōu)雅的清除定時(shí)器，感興趣的可以了解一下

前言

清除定時(shí)器，相信有相當(dāng)一部分人是這么寫的：

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

這是一段常見的代碼，至少我身邊的好幾個(gè)小伙伴（1-3年經(jīng)驗(yàn)的都有）都是這么寫的，這里存在3個(gè)不優(yōu)雅的問題：

clearInterval 后沒有清空 timer 為 null。
開啟定時(shí)器和清除定時(shí)器的代碼分散開在兩個(gè)地方，有損可讀性/維護(hù)性，用尤大大的話說，這使得我們比較難于程序化地清理我們建立的東西。
timer 被定義在 data 里，實(shí)際上 timer 不需要什么響應(yīng)式操作，定義在 data 里是沒必要的，反而造成性能浪費(fèi)。

優(yōu)化

直接上代碼：

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

這里使用 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() {
    reurn {
    }
  },
  
  mounted() {
    let timer = setInterval(() => {
      console.log('setInterval')
    }, 2000)
    this.$on('hook:activated', () => {
      if (timer === null) { // 避免重復(fù)開啟定時(shí)器
        timer = setInterval(() => {
          console.log('setInterval')
        }, 2000)
      }
    })
    this.$on('hook:deactivated', () => {
      clearInterval(timer)
      timer = null
    })
  }
}

這里需要注意一下，由于緩存原因，所以需要用 $on 而不是 $once，不然執(zhí)行一次后就不會(huì)再觸發(fā)了。

到此這篇關(guān)于Vue如何優(yōu)雅的清除定時(shí)器的文章就介紹到這了,更多相關(guān)Vue 清除定時(shí)器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: