vue離開頁面時如何銷毀定時器
更新時間：2022年05月30日 09:45:55 作者：夏代有工的玉
這篇文章主要介紹了vue離開頁面時如何銷毀定時器，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue離開頁面銷毀定時器
beforeDestroy() {
if(this.timer) {
clearInterval(this.timer); //關(guān)閉
?} ?//利用vue的生命周期函數(shù)vue 是單頁面應(yīng)用，路由切換后，定時器并不會自動關(guān)閉，需要手動清除，當頁面被銷毀時，清除定時器即可。
組件里定時器銷毀問題
我在a頁面寫一個定時，讓他每秒鐘打印一個1，然后跳轉(zhuǎn)到b頁面，此時可以看到，定時器依然在執(zhí)行。這樣是非常消耗性能的。
如下圖所示：
解決方法1
首先我在data函數(shù)里面進行定義定時器名稱：
data() {
return {
timer: null // 定時器名稱
}
},然后這樣使用定時器：
this.timer = (() => { // 某些操作 }, 1000)最后在beforeDestroy()生命周期內(nèi)清除定時器：
beforeDestroy() {
clearInterval(this.timer);
this.timer = null;
}方案1有兩點不好的地方，引用尤大的話來說就是：
- 它需要在這個組件實例中保存這個 timer，如果可以的話最好只有生命周期鉤子可以訪問到它。這并不算嚴重的問題，但是它可以被視為雜物。
- 我們的建立代碼獨立于我們的清理代碼，這使得我們比較難于程序化的清理我們建立的所有東西。
解決方案2
該方法是通過$once這個事件偵聽器器在定義完定時器之后的位置來清除定時器。
以下是完整代碼：
const timer = setInterval(() =>{ // 某些定時器操作 }, 500);
// 通過$once來監(jiān)聽定時器，在beforeDestroy鉤子可以被清除。
this.$once('hook:beforeDestroy', () => {
clearInterval(timer);
})類似于其他需要在當前頁面使用，離開需要銷毀的組件（例如一些第三方庫的picker組件等等），都可以使用此方式來解決離開后以后在背后運行的問題。
綜合來說，我們更推薦使用方案2，使得代碼可讀性更強，一目了然。如果不清楚$once、$on、$off的使用，這里送上官網(wǎng)的地址教程，在程序化的事件偵聽器那里。
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
登錄注冊是最常用的網(wǎng)站功能,本文主要介紹了Element實現(xiàn)登錄+注冊的示例代碼,具有一定的參考價值,感興趣的可以了解一下2023-09-09
這篇文章主要介紹了優(yōu)化Vue項目編譯文件大小的方法步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
這篇文章主要給大家介紹了關(guān)于element中一個單選框radio時的選中和取消的相關(guān)資料,文中通過圖文以及代碼示例介紹的非常詳細,對大家的學習或者工作具有一定的參考價值,需要的朋友可以參考下2023-09-09
今天小編就為大家分享一篇axios向后臺傳遞數(shù)組作為參數(shù)的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
ant design vue中日期選擇框混合時間選擇器的用法說明
這篇文章主要介紹了ant design vue中日期選擇框混合時間選擇器的用法說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
vue cli3中eslint報錯no-undef和eslint規(guī)則配置方式
這篇文章主要介紹了vue cli3中eslint報錯no-undef和eslint規(guī)則配置方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
VUE前端實現(xiàn)token的無感刷新3種方案(refresh_token)
這篇文章主要給大家介紹了關(guān)于VUE前端實現(xiàn)token的無感刷新3種方案(refresh_token)的相關(guān)資料,為了提供更好的用戶體驗,我們可以通過實現(xiàn)Token的無感刷新機制來避免用戶在使用過程中的中斷,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了vue3父子組件通信之子組件修改父組件傳過來的值,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-05-05
這篇文章主要介紹了vue對象拷貝,解決由于引用賦值修改原對象的方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
解決vue項目打包上服務(wù)器顯示404錯誤,本地沒出錯的問題
這篇文章主要介紹了解決vue項目打包上服務(wù)器顯示404錯誤,本地沒出錯的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11