av一区二区在线观看_亚洲男人的天堂网站_日韩亚洲视频_在线成人免费_欧美日韩精品免费观看视频_久草视

您的位置:首頁技術文章
文章詳情頁

Vue如何優雅的清除定時器

瀏覽:4日期:2022-09-28 10:09:42
目錄前言優化衍生問題:beforeDestroy 沒有觸發?前言

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

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 清除定時器內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網!

標簽: Vue
相關文章:
主站蜘蛛池模板: 成人一区二区三区在线观看 | 欧美亚洲国产一区 | 黄色欧美 | 日本欧美在线观看视频 | 亚洲免费视频网址 | 国产韩国精品一区二区三区 | 成人av高清在线观看 | 在线观看av网站 | 久久99精品久久久久久国产越南 | 久久精品国产久精国产 | 国产精品久久久久久久7电影 | 日本精品视频在线观看 | 久久国产精品免费视频 | 亚洲久久一区 | 久久99深爱久久99精品 | 久久久精品一区 | 欧美日本在线观看 | 中文字幕免费 | 亚洲国产精品一区二区www | 亚洲美女视频 | wwwxxx日本在线观看 | 国产羞羞视频在线观看 | 国产精品久久久久久模特 | 亚洲精品一区在线观看 | 夜夜骑首页 | 日本精品一区二区三区视频 | 国产资源视频 | 久久久久久免费毛片精品 | 久久久精品网 | 欧产日产国产精品视频 | 国产精品一区二区福利视频 | 亚洲在线 | 国产精品久久久久久吹潮日韩动画 | 国产成人综合在线 | 成人av片在线观看 | 91色站| 欧美乱码精品一区二区三区 | 亚洲国产精品va在线看黑人 | av在线一区二区 | 亚洲欧美日韩一区 | 中国毛片免费 |