Vue 响应式侦听如何在 watchEffect 中同步浏览器标签页可见性的切换

watchEffect 本身不感知浏览器标签页可见性，需将 document.visibilityState 封装为 ref 响应式变量，并在 visibilitychange 事件中更新；watchEffect 由此可响应式监听 isVisible.value 变化，实现前台/后台操作的自动启停。

watchEffect 本身不感知浏览器标签页是否可见，它只响应 Vue 响应式数据的变化。要让它“同步”可见性切换，关键不是让 watchEffect 直接监听 document.hidden，而是把可见性状态变成一个响应式变量，再让 watchEffect 去追踪这个变量。

把 visibilityState 封装成 ref

document.visibilityState 是只读属性，不能直接被 watchEffect 响应。你需要用 ref 主动维护它的当前值，并在 visibilitychange 事件中更新它：

1. 定义一个 ref，如 const isVisible = ref(document.visibilityState === 'visible')
2. 在 onMounted 中注册 window.addEventListener('visibilitychange', () => { isVisible.value = document.visibilityState === 'visible' })
3. 确保事件监听器在组件卸载时移除（可用 onUnmounted 清理）

在 watchEffect 中使用该 ref

现在 isVisible 是真正的响应式数据，watchEffect 可以立即感知变化：

1. watchEffect(() => { if (isVisible.value) { console.log('标签页回到前台，可恢复轮询或同步') } else { console.log('标签页已隐藏，暂停耗资源操作') } })
2. 它会在首次执行时运行一次，之后每次 isVisible.value 改变（比如切到其他 tab 或窗口最小化），回调都会重新触发
3. 无需手动调用，也不依赖定时轮询 —— 完全由浏览器原生事件驱动

配合实际业务逻辑做开关控制

单纯打印日志没意义，重点是用这个信号控制副作用的启停：

1. 轮询类操作：标签页不可见时 clearInterval，可见时重启 setInterval
2. 视频同步：隐藏时暂停 currentTime 上报，恢复时校准一次进度
3. 版本检测：避免后台 tab 频繁请求 /version.json，只在 visible 时 fetch
4. 注意：不要在 watchEffect 内部直接修改 isVisible.value，否则会引发循环

避免常见陷阱

visibilitychange 事件有局限性，需额外判断：

1. 页面首次加载时，visibilityState 可能是 'prerender' 或 'unloaded'，建议初始化时用 document.hasFocus() 或直接取 'visible' 作为兜底
2. 移动端切到后台、iOS Safari 切换 app 等场景也可能触发，但部分老版本可能不支持 visibilitychange，可加 try/catch
3. watchEffect 默认 flush: 'pre'，即 DOM 更新前执行，适合做状态预处理；若需操作更新后的 DOM，可加 { flush: 'post' }