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生命周期也会被执行)