vue(vue3)实现监听切出当前窗口,切回当前窗口调用查询接口
注意: vue中使用,需要及时移除掉监听。比如说2个界面都写了监听方法,然后多次来回切换2个界面,多次切换不同的窗口,会导致调用的接口多次执行,影响性能。
·
vue3中的写法
onMounted(() => {
visibilitychange();
})
/** 浏览器窗口监听(当点击审核跳转其他系统后,数据被审批完了,再次从浏览器窗口切换,请求接口) */
const visibilitychange = () => {
document.addEventListener('visibilitychange', function() {
if (document.visibilityState === 'hidden') {
} else {
getInit() // 查询方法 - 方法中写调用接口代码
}
});
}
vue中的写法
created() {
this.initList()
document.addEventListener('visibilitychange', this.handleVisiable)
},
destroyed() {
document.removeEventListener('visibilitychange', this.handleVisiable)
},
methods: {
/** 切换窗口调用 */
handleVisiable(e) {
switch (e.target.visibilityState) {
case 'hidden':
console.log('离开了')
break
case 'visible':
this.getInit() // 查询方法 - 方法中写调用接口代码
break
}
},
}
注意: vue中使用,需要及时移除掉监听。比如说2个界面都写了监听方法,然后多次来回切换2个界面,多次切换不同的窗口,会导致调用的接口多次执行,影响性能
更多推荐
所有评论(0)