vue监听窗口切换

vue3

import {  onMounted, onUnmounted } from "vue";
  
const handleVisiable = function () {
    if (document.visibilityState == "visible") {
      console.log("页面切回");
    }else if(document.visibilityState == "hidden"){
    console.log("页面切出");
    }
  };    
onMounted(() => {
    {
      document.addEventListener("visibilitychange", handleVisiable);
    }
  });
onUnmounted(() => {
    {
      document.removeEventListener("visibilitychange", handleVisiable);
    }
  });

注意： vue中使用，需要及时移除掉监听。比如说多次来回切换界面，多次切换不同的窗口，会导致时事件多次执行，影响性能。在组件销毁时移除监听。