vue項(xiàng)目中輪詢狀態(tài)更改方式(鉤子函數(shù))
更新時(shí)間：2022年10月21日 08:30:28 作者：騎上我心愛(ài)的小摩托
這篇文章主要介紹了vue項(xiàng)目中輪詢狀態(tài)更改方式(鉤子函數(shù))，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
vue項(xiàng)目中輪詢狀態(tài)更改
在實(shí)際項(xiàng)目中，對(duì)于實(shí)時(shí)存儲(chǔ)改變的數(shù)據(jù)，如果不是使用websoct，就需要使用到輪詢，對(duì)于輪詢實(shí)際是前端設(shè)置的定時(shí)器，不停存儲(chǔ)獲取數(shù)據(jù)并進(jìn)行更改。
而對(duì)于退出該界面后，輪詢邏輯依然在定時(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輪詢方法及清除
<script>
var Vue = new Vue({
el: '#app',
data: {
timer: null,
},
created() {
this.pollfun()
},
methods: {
//輪詢
pollfun() {
this.timer = window.setInterval(() => {
setTimeout(() => {
this.getDetes()
}, 0)
}, 3000)
},
//清除輪詢
clearfun() {
clearInterval(this.timer);
this.timer = null;
}
},
//離開(kāi)頁(yè)面清除
destroyed() {
window.clearInterval(this.timer)
}
})
</script>
destroyed 是監(jiān)聽(tīng)頁(yè)面銷毀鉤子函數(shù)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue如何重置data、組件中的data為什么是一個(gè)函數(shù)、為什么new Vue里的data可以是一個(gè)對(duì)象，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了解決vue中的無(wú)限循環(huán)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
vue監(jiān)聽(tīng)鍵盤事件的快捷方法【推薦】
這篇文章主要介紹了vue監(jiān)聽(tīng)鍵盤事件的快捷方法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-07-07
vue項(xiàng)目實(shí)現(xiàn)下載zip壓縮包
這篇文章主要介紹了vue項(xiàng)目實(shí)現(xiàn)下載zip壓縮包方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了vue中template的三種寫法示例，幫助大家更好的理解和學(xué)習(xí)vue，感興趣的朋友可以了解下2020-10-10
這篇文章主要介紹了Vue封裝Axios請(qǐng)求和攔截器的步驟，幫助大家更好的對(duì)axios進(jìn)行封裝并將接口統(tǒng)一管理，同時(shí)為請(qǐng)求和響應(yīng)設(shè)置攔截器interceptors。，感興趣的朋友可以了解下2020-09-09
Vue3.0監(jiān)聽(tīng)器watch與watchEffect詳解
在 Vue 3 中,watch 仍然是一種用于監(jiān)聽(tīng)數(shù)據(jù)變化并執(zhí)行相應(yīng)操作的方式,不過(guò)在組合式 API 中,watch 的使用方式與選項(xiàng)式 API 略有不同,這篇文章主要介紹了Vue3.0監(jiān)聽(tīng)器watch與watchEffect,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了vue中封裝echarts公共組件過(guò)程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
在vue中使用vant TreeSelect分類選擇組件操作
這篇文章主要介紹了在vue中使用vant TreeSelect分類選擇組件操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
vue+Element-ui實(shí)現(xiàn)分頁(yè)效果
這篇文章主要為大家詳細(xì)介紹了vue+Element-ui實(shí)現(xiàn)分頁(yè)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11