VUE設(shè)置和清除定時(shí)器的方式及遇到的問題
方法一、在生命周期函數(shù)beforeDestroy中清除
data() { return { timer: null; }; }, created() { // 設(shè)置定時(shí)器,5s執(zhí)行一次 this.timer = setInterval(() => { console.log('setInterval'); }, 5000); } beforeDestroy () { //清除定時(shí)器 clearInterval(this.timer); this.timer = null; }
方法二、使用hook:beforedestroy(推薦)
created() { // 設(shè)置定時(shí)器,5s執(zhí)行一次 let timer = setInterval(() => { console.log('setInterval'); }, 5000); // 離開當(dāng)前頁面時(shí)銷毀定時(shí)器 this.$once('hook:beforeDestroy', () => { clearInterval(timer); timer = null; }) }
該方法與在生命周期鉤子beforeDestroy中清除定時(shí)器的操作原理一樣,但更有優(yōu)勢(shì)
1.無需在vue實(shí)例上定義定時(shí)器,減少不必要的內(nèi)存浪費(fèi)
2.設(shè)置和清除定時(shí)器的代碼放在一塊,可讀性維護(hù)性更好
三、beforeDestroy函數(shù)沒有觸發(fā)的情況
1、原因
<router-view>外層包裹了一層<keep-alive>
< keep-alive > 有緩存的作用,可以使被包裹的組件狀態(tài)維持不變,當(dāng)路由被 keep-alive 緩存時(shí)不走 beforeDestroy 生命周期。被包含在
< keep-alive > 中創(chuàng)建的組件,會(huì)多出兩個(gè)生命周期鉤子: activated 與 deactivated。
activated
在組件被激活時(shí)調(diào)用,在組件第一次渲染時(shí)也會(huì)被調(diào)用,之后每次keep-alive激活時(shí)被調(diào)用。
deactivated
在組件失活時(shí)調(diào)用。
2、解決方案
借助 activated 和 deactivated 鉤子來設(shè)置和清除定時(shí)器
(1)生命周期鉤子
created() { // 頁面激活時(shí)設(shè)置定時(shí)器 this.$on("hook:activated", () => { let timer = setInterval(()=>{ console.log("setInterval"); },1000) }) // 頁面失活時(shí)清除定時(shí)器 this.$on("hook:deactivated", ()=>{ clearInterval(timer); timer = null; }) }
(2)hook
data() { return { timer: null // 定時(shí)器 } }, activated() { // 頁面激活時(shí)開啟定時(shí)器 this.timer = setInterval(() => { console.log('setInterval'); }, 5000) }, deactivated() { // 頁面關(guān)閉(路由跳轉(zhuǎn))時(shí)清除定時(shí)器 clearInterval(this.timer) this.timer = null },
附:vue離開頁面銷毀定時(shí)器
vue 是單頁面應(yīng)用,路由切換后,定時(shí)器并不會(huì)自動(dòng)關(guān)閉,需要手動(dòng)清除,當(dāng)頁面被銷毀時(shí),清除定時(shí)器即可。
data: { ? ? return { ? ? ? ? timer: null ? ? } }, created() { ? ? this.timer = setInterval(....); }, beforeDestroy() { ? ? if(this.timer) { //如果定時(shí)器還在運(yùn)行 或者直接關(guān)閉,不用判斷 ? ? ? ? clearInterval(this.timer); //關(guān)閉 ? ? } }
總結(jié)
到此這篇關(guān)于VUE設(shè)置和清除定時(shí)器的文章就介紹到這了,更多相關(guān)VUE設(shè)置和清除定時(shí)器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vite創(chuàng)建項(xiàng)目的實(shí)現(xiàn)步驟
隨著 Vite2 的發(fā)布并日趨穩(wěn)定,現(xiàn)在越來越多的項(xiàng)目開始嘗試使用它。本文我們就介紹了Vite創(chuàng)建項(xiàng)目的實(shí)現(xiàn)步驟,感興趣的可以了解一下2021-07-07Vue中nprogress頁面加載進(jìn)度條的方法實(shí)現(xiàn)
這篇文章主要介紹了Vue中nprogress頁面加載進(jìn)度條的方法實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11移動(dòng)端底部導(dǎo)航固定配合vue-router實(shí)現(xiàn)組件切換功能
經(jīng)常遇到這樣的需求,移動(dòng)端中的導(dǎo)航并不是在頂部也不是在底部,而是在最底部且是固定的,當(dāng)我們點(diǎn)擊該導(dǎo)航項(xiàng)時(shí)會(huì)切換到對(duì)應(yīng)的組件。這篇文章主要介紹了移動(dòng)端底部導(dǎo)航固定配合vue-router實(shí)現(xiàn)組件切換功能,需要的朋友可以參考下2019-06-06vue.js中使用echarts實(shí)現(xiàn)數(shù)據(jù)動(dòng)態(tài)刷新功能
這篇文章主要介紹了vue.js中使用echarts實(shí)現(xiàn)數(shù)據(jù)動(dòng)態(tài)刷新功能,需要的朋友可以參考下2019-04-04el-table實(shí)現(xiàn)轉(zhuǎn)置表格的示例代碼(行列互換)
這篇文章主要介紹了el-table實(shí)現(xiàn)轉(zhuǎn)置表格的示例代碼(行列互換),本文結(jié)合示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-02-02