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

原创已于 2023-06-26 13:52:02 修改 · 4.2k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

于 2023-06-05 16:55:22 首次发布

文章介绍了在Vue3和Vue中处理`visibilitychange`事件的不同方法，强调了在Vue中需要正确添加和移除事件监听以避免接口被多次执行，影响性能。Vue3中使用`onMounted`，而Vue则在`created`和`destroyed`生命周期钩子中管理事件监听。

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
      }
    },
  }