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