浅析vue实现监听切出当前页面的两种方法：visibilitychange事件和onblur事件

一、visibilitychange事件

　　首先说一个h5事件 visibilitychange

　　visibilitychange是浏览器新添加的一个事件，当浏览器当前页面被最小化，或者切换到浏览器的其他标签页，或者从其他页面或应用返回到当前标签页，都会触发这个事件。

　　document.visibilityState共有四个值：

1.hidden：文档处于背景标签页或者窗口处于最小化状态，或者操作系统正处于 ‘锁屏状态’

2.visible：只要页面可见，哪怕只露出了一个角 document.visibilityState 也会返回 visible

3.prerender：页面在屏幕外执行预渲染处理 document.hidden 的值为 true

4.还有一个已经废弃了值unloaded 表示页面即将卸载

　　另外，当document.visibilityState属性返回visible时，document.hidden属性返回false；其他情况下，都返回true。

　　在vue环境中

mounted() {  
  document.addEventListener('visibilitychange', this.handleVisiable)  
},  
destroyed() {  
  document.removeEventListener('visibilitychange', this.handleVisiable)  
},  
methods: {  
  handleVisiable(e) {  
    switch(e.target.visibilityState) {
      case 'prerender':
        console.log('网页预渲染，内容不可见')
        break;
      case 'hidden':
        console.log('内容不可见，处理后台、最小化、锁屏状态')
        alert('警告！你已经离开当前答题页面');
        break;
      case 'visible':
        console.log('处于正常打开')
        break;
    }
  }
}

　　在 html 中

<script>
  document.addEventListener('visibilitychange', function() {
  //console.log(document.visibilityState)        
  switch(document.visibilityState) {
    case 'prerender':
      console.log('网页预渲染，内容不可见')
      break;      
    case 'hidden':
      console.log('内容不可见，处理后台、最小化、锁屏状态')
      break;       
    case 'visible':
     console.log('处于正常打开')
     break;
    }
  })
</script>

　　当页面被切出或最小化后，会出现弹窗警告，如下图：

　　但是注意：由于 visible 当另外开启一个小窗浏览器或应用，还能看到当前页面，当前页面和小窗应用来回切换时不会触发事件。只有页面最大化时看不到当前页面了，visibilityState值从visible改变后会触发。

二、应用：vue（vue3）实现监听切出当前窗口，切回当前窗口调用查询接口

　created() {
    this.initList()
    document.addEventListener('visibilitychange', this.handleVisiable)
  },
  destroyed() {
    document.removeEventListener('visibilitychange', this.handleVisiable)
  },
  methods: {
    /** 切换窗口调用 */
    handleVisiable(e) {
      switch (e.target.visibilityState) {
        case 'hidden':
          console.log('离开了')
          break
        case 'visible':
          this.getInit()  // 查询方法 - 方法中写调用接口代码
          break
      }
    },
  }

　　注意：vue中使用，需要及时移除掉监听。比如说2个界面都写了监听方法，然后多次来回切换2个界面，多次切换不同的窗口，会导致调用的接口多次执行，影响性能

三、onblur事件

　　onblur 事件会在对象失去焦点时发生，将事件绑定在dom元素上，当失去焦点时触发

　　模拟一个场景，像学习通在线考试功能，会监听学生鼠标移出考试页面。我们给body元素绑定一个函数用于监听鼠标离开了当前页面并进行一个记录，当触发后会提醒学生