Vue 3：处理“visibilitychange”和“offline”等事件监听器的正确方法是什么？

Question

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

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

注意 C：我是 Vue 的初学者，试图学习东西

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

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

任何帮助将不胜感激！

这里有两个 vanilla 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 ，如下所示：

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