在vue項(xiàng)目開發(fā)中卒废,頁(yè)面中存在過(guò)多的定時(shí)器孽查,輪詢等操作的時(shí)候终息,如果瀏覽器標(biāo)簽頁(yè)開的太多會(huì)出現(xiàn)卡頓的現(xiàn)象斥难,那么如何解決此類問(wèn)題呢
visibilitychange可以監(jiān)聽當(dāng)前標(biāo)簽頁(yè)狀態(tài)變化
methods: {
// 業(yè)務(wù)操作
hanldeVisiblityChange() {
if (document.visibilityState === 'hidden') {
console.info('ws hidden>>>關(guān)閉定時(shí)器');
}
else if (document.visibilityState === 'visible') {
console.info('ws visible>>>啟動(dòng)定時(shí)器');
}
}
},
mounted() {
// 監(jiān)聽當(dāng)前頁(yè)面 顯示狀態(tài)
window.addEventListener('visibilitychange',, this.hanldeVisiblityChange);
// 當(dāng)頁(yè)面被銷毀時(shí) 移除監(jiān)聽
this.$on('hook:beforeDestroy', () => {
console.info('ws 我被銷毀了, 移除監(jiān)聽>>>');
window.removeEventListener('visibilitychange', this.hanldeVisiblityChange)
})
},
beforeDestroy() {
console.info('ws 我被銷毀了,vue生命周期 >>>');
},
mounted中添加一個(gè)監(jiān)聽需要在beforeDistroy中移除這個(gè)監(jiān)聽逗鸣,考慮到某些原因你不想再寫個(gè)beforeDistroy去實(shí)現(xiàn)合住,這時(shí)候hook就能完美的解決問(wèn)題 (注:通過(guò)正常途徑注冊(cè)的vue生命周期也會(huì)被執(zhí)行)