watchEffect 本身不感知浏览器标签页可见性，需将 document.visibilityState 封装为 ref 响应式变量，并在 visibilitychange 事件中更新；watchEffect 由此可响应式监听 isVisible.value 变化，实现前台/后台操作的自动启停。
watchEffect 本身不感知浏览器标签页是否可见，它只响应 Vue 响应式数据的变化。要让它“同步”可见性切换，关键不是让 watchEffect 直接监听 document.hidden，而是把可见性状态变成一个响应式变量，再让 watchEffect 去追踪这个变量。
把 visibilityState 封装成 ref
document.visibilityState 是只读属性，不能直接被 watchEffect 响应。你需要用 ref 主动维护它的当前值，并在 visibilitychange 事件中更新它：
- 定义一个 ref，如 const isVisible = ref(document.visibilityState === 'visible')
- 在 onMounted 中注册 window.addEventListener('visibilitychange', () => { isVisible.value = document.visibilityState === 'visible' })
- 确保事件监听器在组件卸载时移除（可用 onUnmounted 清理）
在 watchEffect 中使用该 ref
现在 isVisible 是真正的响应式数据，watchEffect 可以立即感知变化：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- watchEffect(() => { if (isVisible.value) { console.log('标签页回到前台，可恢复轮询或同步') } else { console.log('标签页已隐藏，暂停耗资源操作') } })
- 它会在首次执行时运行一次，之后每次 isVisible.value 改变（比如切到其他 tab 或窗口最小化），回调都会重新触发
- 无需手动调用，也不依赖定时轮询 —— 完全由浏览器原生事件驱动
配合实际业务逻辑做开关控制
单纯打印日志没意义，重点是用这个信号控制副作用的启停：
立即学习“前端免费学习笔记（深入）”；
- 轮询类操作：标签页不可见时 clearInterval，可见时重启 setInterval
- 视频同步：隐藏时暂停 currentTime 上报，恢复时校准一次进度
- 版本检测：避免后台 tab 频繁请求 /version.json，只在 visible 时 fetch
- 注意：不要在 watchEffect 内部直接修改 isVisible.value，否则会引发循环
避免常见陷阱
visibilitychange 事件有局限性，需额外判断：
- 页面首次加载时，visibilityState 可能是 'prerender' 或 'unloaded'，建议初始化时用 document.hasFocus() 或直接取 'visible' 作为兜底
- 移动端切到后台、iOS Safari 切换 app 等场景也可能触发，但部分老版本可能不支持 visibilitychange，可加 try/catch
- watchEffect 默认 flush: 'pre'，即 DOM 更新前执行，适合做状态预处理；若需操作更新后的 DOM，可加 { flush: 'post' }
