vue3 判断浏览器打开窗口页签变化

      场景：当需要同时打开两个页签，需要在切换页签的时候，重新获取数据 

      根据document.visibilityState结果判断。如果为visible则证明回到当前页签， 如果为hidden则证明当前页面未显示（前往了其他页签）

import { onMounted, onUnmounted } from 'vue';

    const handleVisibilityChange = () => {
      if (document.visibilityState === 'visible') {
        // 页面被切换到前台
        console.log('页面被切换到前台');
        // 在这里执行页面回到前台时需要做的事情
      } else if (document.visibilityState === 'hidden') {
        // 页面被切换到后台
        console.log('页面被切换到后台');
        // 在这里执行页面离开时需要做的事情
      }
    };
 
    onMounted(() => {
      document.addEventListener('visibilitychange', handleVisibilityChange);
    });
 
    onUnmounted(() => {
      document.removeEventListener('visibilitychange', handleVisibilityChange);
    });