前言

在系统中，如果有打开新页面进行相关操作，若是有关联操作就需要通过判断页面的可见性来进行后绪的操作

一、触发visibilitychange变更的情况

页面的可见性有三个层面

• 页面可见时，用户关闭 Tab 页或浏览器窗口。
• 页面可见时，用户在当前窗口前往另一个页面。
• 页面不可见时，用户或系统关闭浏览器窗口。

这三种情况，都会触发visibilitychange事件。前两种情况，该事件在用户离开页面时触发；最后一种情况，该事件在页面从可见状态变为不可见状态时触发。

二、 hidden与visibilityState

hidden与visibilityState 都是 document对象的属性

document.visibilityState

返回一个字符串，表示页面当前的可见性状态，共有三个可能的值。

• hidden：页面彻底不可见。
• visible：页面至少一部分可见。
• prerender：页面即将或正在渲染，处于不可见状态。

只要页面可见，其值就是true,什么情况下是hidden呢？

• 浏览器最小化。
• 浏览器没有最小化，但是当前页面切换成了背景页。
• 浏览器将要卸载（unload）页面。
• 操作系统触发锁屏屏幕。

document.hidden

只读，返回一个布尔值，表示当前页面是否可见
当document.visibilityState属性返回visible时，document.hidden属性返回false；其他情况下，都返回true
推荐使用document.visibilityState来判断页面的可见性

三、visibilitychange 事件

只要document.visibilityState属性发生变化，就会触发visibilitychange事件。因此，可以通过监听这个事件（通过document.addEventListener()方法或document.onvisibilitychange属性），跟踪页面可见性的变化

四、代码示例

<template>
  <div ref="refDV">
    测试visibilitychange
    <el-button type="primary" @click="handleAddListener">启用</el-button>
    <el-button type="danger" @click="handleremoveListener">销毁</el-button>
  </div>
</template>
<script>
function gethiddenStatus() {
  var isHidden = document.hidden;
  if (isHidden) {
    // 失去焦点
    document.title = '小主，快回来';
    console.log('visibilitychange--lost', document.visibilityState);
  } else {
    // 未失去焦点
    document.title = '激活窗户';
    console.log('visibilitychange--com', document.visibilityState);
  }
}
export default {
  mounted() {
    this.handleAddListener();
  },
  destroyed() {
    this.handleremoveListener();
  },
  methods: {
    // 开启
    handleAddListener() {
      document.addEventListener('visibilitychange', gethiddenStatus, true);
    },
    // 手动销毁
    handleremoveListener() {
      document.removeEventListener('visibilitychange', gethiddenStatus, true);
    }
  }
};
</script>

输出结果参考：

销毁事件后，不再触发visibilitychange