Vue如何優(yōu)雅的清除定時(shí)器
清除定時(shí)器,相信有相當(dāng)一部分人是這么寫(xiě)的:
export default { data() { reurn { timer: null } }, mounted() { this.timer = setInterval(() => { console.log(’setInterval’) }, 2000) }, beforeDestroy() { clearInterval(this.timer) }}
這是一段常見(jiàn)的代碼,至少我身邊的好幾個(gè)小伙伴(1-3年經(jīng)驗(yàn)的都有)都是這么寫(xiě)的,這里存在3個(gè)不優(yōu)雅的問(wèn)題:
clearInterval 后沒(méi)有清空 timer 為 null。開(kāi)啟定時(shí)器和清除定時(shí)器的代碼分散開(kāi)在兩個(gè)地方,有損可讀性/維護(hù)性,用尤大大的話說(shuō),這使得我們比較難于程序化地清理我們建立的東西。 timer 被定義在 data 里,實(shí)際上 timer 不需要什么響應(yīng)式操作,定義在 data 里是沒(méi)必要的,反而造成性能浪費(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)聽(tīng) beforeDestroy 生命周期,這樣 timer 只需被定義在生命周期里,以上的問(wèn)題就全部解決了。
衍生問(wèn)題:beforeDestroy 沒(méi)有觸發(fā)?在后臺(tái)系統(tǒng)中,我們常常會(huì)設(shè)置頁(yè)面緩存,而當(dāng)路由被 keep-alive 緩存時(shí)是不走 beforeDestroy 生命周期的,所以有些小伙伴以為在 beforeDestroy 清除定時(shí)器就完事了,甚至都沒(méi)有檢查一下,實(shí)際上定時(shí)器并沒(méi)有被清除掉。知道了原因也就好解決了,借助 activated 和 deactivated 這兩個(gè)生鉤子:
export default { data() { reurn { } }, mounted() { let timer = setInterval(() => { console.log(’setInterval’) }, 2000) this.$on(’hook:activated’, () => { if (timer === null) { // 避免重復(fù)開(kāi)啟定時(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)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)!
相關(guān)文章:
1. 用Spring JMS使異步消息變得簡(jiǎn)單2. PHP驗(yàn)證碼工具-Securimage3. 關(guān)于IDEA 2020.3 多窗口視圖丟失的問(wèn)題4. js實(shí)現(xiàn)碰撞檢測(cè)5. 一文帶你徹底理解Java序列化和反序列化6. JS實(shí)現(xiàn)前端動(dòng)態(tài)分頁(yè)碼代碼實(shí)例7. PHP使用Swagger生成好看的API文檔8. ASP.NET MVC使用jQuery ui的progressbar實(shí)現(xiàn)進(jìn)度條9. Python 下載Bing壁紙的示例10. Python 制作查詢商品歷史價(jià)格的小工具

網(wǎng)公網(wǎng)安備