利用visibilitychange事件来处理页面可见性变

使用场景：可以利用visibilitychange事件来处理页面可见性变化，例如在页面不可见时暂停视频播放、更新页面数据等。

在Vue 3中，可以使用onBeforeMount和onUnmounted钩子函数来监听页面可见性变化，并执行相应的逻辑。

以下是在Vue 3中使用visibilitychange的具体步骤：

1. 在组件的setup方法中引入ref和onBeforeMount以及onUnmounted钩子函数：

import { ref, onBeforeMount, onUnmounted } from 'vue';

2. 创建一个ref来保存可见性状态：

const isVisible = ref(true);

3. 创建一个函数来处理可见性变化的事件：

const handleVisibilityChange = () => {
  isVisible.value = !document.hidden;
};

4. 在onBeforeMount钩子函数中，添加可见性变化事件的监听器：

onBeforeMount(() => {
  document.addEventListener('visibilitychange', handleVisibilityChange);
});

5. 在onUnmounted钩子函数中，移除可见性变化事件的监听器：

onUnmounted(() => {
  document.removeEventListener('visibilitychange', handleVisibilityChange);
});

6. 最后，在模板中使用可见性状态：

<template>
  <div>
    <p v-if="isVisible">页面当前可见p>
    <p v-else>页面当前不可见p>
  div>
template>

这样，当页面可见性发生变化时，isVisible的值会更新，从而触发模板中的相应变化。