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

Question

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

注意B:我一直在寻找"全部"；但在任何地方都找不到。如果答案是肯定的，请随意扇我耳光。

注意C:我是Vue的初学者，正在尝试学习

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

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

如有任何帮助，我们将不胜感激！

下面是两个普通JS代码示例，一个带有窗口，另一个带有文档：

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>