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