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