vue怎么在标签判断_vue监控当前标签页是否显示状态
在vue项目开发中，页面中存在过多的定时器，轮询等操作的时候，如果浏览器标签页开的太多会出现卡顿的现象，那么如何解决此类问题呢
visibilitychange可以监听当前标签页状态变化
methods: {
// 业务操作
hanldeVisiblityChange() {
if (document.visibilityState === 'hidden') {
console.info('ws hidden>>>关闭定时器');
}
else if (document.visibilityState === 'visible') {
console.info('ws visible>>>启动定时器');
}
}
},
mounted() {
// 监听当前页面 显示状态
window.addEventListener('visibilitychange',, this.hanldeVisiblityChange);
// 当页面被销毁时 移除监听
this.$on('hook:beforeDestroy', () => {
console.info('ws 我被销毁了, 移除监听>>>');
window.removeEventListener('visibilitychange', this.hanldeVisiblityChange)
})
},
beforeDestroy() {
console.info('ws 我被销毁了,vue生命周期 >>>');
},
mounted中添加一个监听需要在beforeDistroy中移除这个监听，考虑到某些原因你不想再写个beforeDistroy去实现，这时候hook就能完美的解决问题 (注：通过正常途径注册的vue生命周期也会被执行)
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！