javascript - Vue 3 : What's the proper way of handling event listeners like "visibilitychange" and "offline"?

Question

注意 A: 我不是在谈论元素上的事件监听器，例如 @click

注释 B:我一直在“到处”寻找这个，但在任何地方都找不到它。如果答案就在那里，请随意打我的脸。

注释 C:我是 Vue 的初学者，试图学习一些东西

我想我可以将这些类型的事件监听器放在 ma​​in.js 中，但这似乎有点不对劲？另外，我如何从 main.js 中调用 App.vue 中声明的函数？

我猜有更好、更合适的方法来在 App.vue 和生命周期内处理这个问题？

任何帮助将不胜感激!

这里有两个普通的 JS 代码示例，一个带有 window，另一个带有 document:

window.addEventListener('offline', function() {
  alert('You seem to be offline!');
});

document.addEventListener('visibilitychange', function() {
  if (document.visibilityState === 'visible') {
    alert('Hello again!');
  }
});

Answer 1

您可以在 SFC 的 created 或 mounted Hook 中设置事件监听器，如下所示:

<script>
export default {
  created () {
    document.addEventListener('visibilitychange', this.handleVisibility, false)
  },
  methods: {
    handleVisibility (e) {
      if (document.visibilityState === 'hidden') {
        // do what you like
      } else {
        // again do as you like
      }
    }
  }
};
</script>