解決vue組件銷毀之后計時器繼續(xù)執(zhí)行的問題
更新時間：2020年07月21日 10:51:43 作者：淵波太郎
這篇文章主要介紹了解決vue組件銷毀之后計時器繼續(xù)執(zhí)行的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
直接上代碼，以下
window.setTimeout(function(){
if(this && !this._isDestroyed){ //_isDestroyed 組件是否被銷毀
return;
}
window.location.href = "/serverMonitor?t="+ new Date().getTime();
}，5000）
很粗暴的方法，在執(zhí)行之前看是否被銷毀就行，
第二種方法，調(diào)用路由組件內(nèi)的鉤子函數(shù)beforeRouteLeave
beforeRouteLeave（to，from，next）{
clearTimeout（window.timer）；
next（）；
}
補充知識：vue銷毀時事件，created和mounted&&activated的區(qū)別
我就廢話不多說了，大家還是直接看代碼吧~
// 關閉當前頁面就會銷毀監(jiān)聽事件（checkpay）
destroyed() {
clearInterval(this.checkpay)
}
created()在創(chuàng)建vue對象時，在html渲染之前就觸發(fā)；但是注意created()只會觸發(fā)一次； mounted（）在html渲染完成之后才會執(zhí)行的；
activated()進入當前存在activated()函數(shù)的頁面時，一進入頁面就觸發(fā)；可用于初始化頁面數(shù)據(jù)等
以上這篇解決vue組件銷毀之后計時器繼續(xù)執(zhí)行的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家介紹了前端vue架構插槽slot使用教程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-02-02
這篇文章主要介紹了vue加載視頻流,實現(xiàn)直播功能的過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
本篇是我對vue使用過程中以及對一些社區(qū)朋友提問我的問題中做的一些總結，感興趣的朋友跟隨腳本之家小編一起學習吧2018-02-02
淺談VueUse中useAsyncState的實現(xiàn)原理
useAsyncState?是 VueUse 庫中提供的一個實用工具,它用于處理異步狀態(tài),本文主要介紹了VueUse中useAsyncState的實現(xiàn)及其原理,具有一定的參考價值,感興趣的可以了解一下2024-08-08
這篇文章主要介紹了Vue3中watch的詳解,主要包括Vue2使用watch及Vue3使用watch的方法，通過多種情況實例代碼相結合給大家詳細講解，需要的朋友可以參考下2022-11-11
微信、支付寶支付密碼時的密碼輸入框大家都很熟悉，本文主要介紹了vue3如何實現(xiàn)?6位支付密碼輸入框，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04
Vue移動端實現(xiàn)pdf/excel/圖片在線預覽
這篇文章主要為大家詳細介紹了Vue移動端實現(xiàn)pdf/excel/圖片在線預覽功能的相關方法,文中的示例代碼講解詳細,有需要的小伙伴可以參考下2024-04-04
其實很多公司都會有類似于用戶權限樹的增刪改查功能，本文主要介紹了vue實現(xiàn)樹形結構增刪改查，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
本文介紹了如何以Vue引入antDesignUI,主要包括下載安裝、配置和引入組件等步驟,通過本文,讀者可以快速了解antDesignUI在Vue中的應用,感興趣的可以了解一下2023-08-08
如何解決Element-ui的el-table固定列后出現(xiàn)的表格錯位問題
這篇文章主要介紹了如何解決Element-ui的el-table固定列后出現(xiàn)的表格錯位問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-09-09