這篇文章主要介紹“Vue怎么優(yōu)雅的清除定時(shí)器”的相關(guān)知識，小編通過實(shí)際案例向大家展示操作過程，操作方法簡單快捷，實(shí)用性強(qiáng)，希望這篇“Vue怎么優(yōu)雅的清除定時(shí)器”文章能幫助大家解決問題。

創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括趙縣網(wǎng)站建設(shè)、趙縣網(wǎng)站制作、趙縣網(wǎng)頁制作以及趙縣網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，趙縣網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到趙縣省份的部分城市，未來相信會繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

前言

清除定時(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ǒng)中，我們常常會設(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í)行一次后就不會再觸發(fā)了。

關(guān)于“Vue怎么優(yōu)雅的清除定時(shí)器”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點(diǎn)。

文章題目：Vue怎么優(yōu)雅的清除定時(shí)器
鏈接URL：http://www.chinadenli.net/article8/gpcsip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、云服務(wù)器、網(wǎng)站維護(hù)、電子商務(wù)、網(wǎng)站策劃、手機(jī)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)