vue項(xiàng)目中輪詢(xún)狀態(tài)更改方式(鉤子函數(shù))
更新時(shí)間：2022年10月21日 08:30:28 作者：騎上我心愛(ài)的小摩托
這篇文章主要介紹了vue項(xiàng)目中輪詢(xún)狀態(tài)更改方式(鉤子函數(shù))，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
vue項(xiàng)目中輪詢(xún)狀態(tài)更改
在實(shí)際項(xiàng)目中，對(duì)于實(shí)時(shí)存儲(chǔ)改變的數(shù)據(jù)，如果不是使用websoct，就需要使用到輪詢(xún)，對(duì)于輪詢(xún)實(shí)際是前端設(shè)置的定時(shí)器，不停存儲(chǔ)獲取數(shù)據(jù)并進(jìn)行更改。
而對(duì)于退出該界面后，輪詢(xún)邏輯依然在定時(shí)器的執(zhí)行中進(jìn)行，此時(shí)需要用到鉤子函數(shù)判斷路由離開(kāi)狀態(tài)后，進(jìn)行清除定時(shí)器
//離開(kāi)當(dāng)前頁(yè)面
beforeRouteLeave(to, from, next) {
window.clearInterval(this.myInterval);
//清除定時(shí)器
next();
},vue輪詢(xún)方法及清除
<script>
var Vue = new Vue({
el: '#app',
data: {
timer: null,
},
created() {
this.pollfun()
},
methods: {
//輪詢(xún)
pollfun() {
this.timer = window.setInterval(() => {
setTimeout(() => {
this.getDetes()
}, 0)
}, 3000)
},
//清除輪詢(xún)
clearfun() {
clearInterval(this.timer);
this.timer = null;
}
},
//離開(kāi)頁(yè)面清除
destroyed() {
window.clearInterval(this.timer)
}
})
</script>
destroyed 是監(jiān)聽(tīng)頁(yè)面銷(xiāo)毀鉤子函數(shù)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue在頁(yè)面右上角實(shí)現(xiàn)可懸浮/隱藏的系統(tǒng)菜單
這篇文章主要介紹了Vue在頁(yè)面右上角實(shí)現(xiàn)可懸浮/隱藏的系統(tǒng)菜單,實(shí)現(xiàn)思路大概是通過(guò)props將showCancel這個(gè)Boolean值傳遞到子組件，對(duì)父子組件分別綁定事件，來(lái)控制這個(gè)系統(tǒng)菜單的顯示狀態(tài)。需要的朋友可以參考下2018-05-05
這篇文章主要介紹了Vue3屬性綁定方法解析，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-09-09
Vue axios 跨域請(qǐng)求無(wú)法帶上cookie的解決
這篇文章主要介紹了Vue axios 跨域請(qǐng)求無(wú)法帶上cookie的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
Vue無(wú)法讀取HTMLCollection列表的length問(wèn)題解決
這篇文章主要介紹了Vue無(wú)法讀取HTMLCollection列表的length問(wèn)題解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue使用cesium創(chuàng)建數(shù)據(jù)白模方式
這篇文章主要介紹了vue使用cesium創(chuàng)建數(shù)據(jù)白模方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue通過(guò)?API?監(jiān)聽(tīng)數(shù)組的變化
這篇文章主要介紹了vue通過(guò)?API?監(jiān)聽(tīng)數(shù)組的變化,在?Vue?中，你可以通過(guò)監(jiān)聽(tīng)數(shù)組的變化來(lái)更新界面，Vue?提供了一些特殊的語(yǔ)法以及?API?來(lái)實(shí)現(xiàn)對(duì)數(shù)組的監(jiān)聽(tīng)，本文通過(guò)實(shí)例代碼介紹的非常詳細(xì)，需要的朋友可以參考下2023-05-05
element?ui富文本編輯器的使用效果與步驟(quill-editor)
富文本編輯器在任何項(xiàng)目中都會(huì)用到,在Element中我們推薦vue-quill-editor組件,下面這篇文章主要給大家介紹了關(guān)于element?ui富文本編輯器的使用效果與步驟(quill-editor)的相關(guān)資料,需要的朋友可以參考下2022-10-10
Vuerouter的beforeEach與afterEach鉤子函數(shù)的區(qū)別
本文詳細(xì)的介紹了Vuerouter的beforeEach與afterEach鉤子函數(shù)的區(qū)別和使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
Vue3?計(jì)算屬性computed的實(shí)現(xiàn)原理
這篇文章主要介紹了Vue3?計(jì)算屬性computed的實(shí)現(xiàn)原理，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的朋友可以參考一下2022-08-08
基于Vue.js實(shí)現(xiàn)簡(jiǎn)潔的多屏切換效果
在實(shí)際開(kāi)發(fā)中,多屏切換是常見(jiàn)的需求,尤其是在需要展示大量?jī)?nèi)容或信息時(shí),下面我將向大家展示我是如何實(shí)現(xiàn)三屏,并通過(guò)動(dòng)態(tài)按鈕控制切換屏幕的,感興趣的小伙伴跟著小編一起來(lái)看看吧2024-09-09