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)
        })
    }

Tip: beforeDestroy监听可以使用hook去实现。

如有其它优化方案，欢迎留言讨论。