vue3（vue2）实现监听切出当前窗口，切回当前窗口调用查询接口

Vue3写法

• 进入页面监听

onMounted(() => {
  document.addEventListener('visibilitychange', judgeWhether);
});

• 离开页面去掉监听

onBeforeUnmount(() => {
  document.removeEventListener('visibilitychange', judgeWhether);
});

• 切换窗口调用的方法

function judgeWhether(e) {
  if (e.target.visibilityState === 'visible') {
    getList();// 查询方法 - 方法中写调用接口代码
  }
}

Vue2写法

created() {
    this.getList()
    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.getList()  // 查询方法 - 方法中写调用接口代码
          break
      }
    },
  }