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

vue3中的写法

onMounted(() => {
 visibilitychange();
})
/** 浏览器窗口监听（当点击审核跳转其他系统后，数据被审批完了，再次从浏览器窗口切换，请求接口） */
const visibilitychange = () => {
  document.addEventListener('visibilitychange', function() {
    if (document.visibilityState === 'hidden') {
    } else {
      getInit() // 查询方法 - 方法中写调用接口代码
    }
  });
}

vue中的写法

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个界面，多次切换不同的窗口，会导致调用的接口多次执行，影响性能