usePageVisibility

监听页面的可见性状态，检测标签页切换、窗口最小化等事件。

前置依赖

依赖参数

参数名	类型	说明
deps.vue.ref	<T>(value: T) => Ref<T>	Vue ref 函数
deps.vue.onMounted	(fn: () => void) => void	Vue onMounted 钩子
deps.vue.onUnmounted	(fn: () => void) => void	Vue onUnmounted 钩子
deps.document	DocumentVisibility	Document 对象

环境要求

浏览器 API: Page Visibility API

所有主流浏览器都支持。

函数签名

function usePageVisibility(
  deps: UsePageVisibilityDeps
): UsePageVisibilityReturn

interface UsePageVisibilityDeps {
  vue: VueCompositionAPI
  document: DocumentVisibility
}

interface UsePageVisibilityReturn {
  isSupported: Ref<boolean>
  isVisible: Ref<boolean>
  visibilityState: Ref<'visible' | 'hidden' | 'prerender'>
}

参数

参数名	类型	必填	说明
deps	UsePageVisibilityDeps	是	依赖注入对象

返回值

属性	类型	说明
isSupported	Ref<boolean>	是否支持 Page Visibility API
isVisible	Ref<boolean>	页面是否可见
visibilityState	Ref<'visible' | 'hidden' | 'prerender'>	详细的可见性状态

工作原理

1. 检查浏览器是否支持 Page Visibility API
2. 监听 visibilitychange 事件
3. 实时更新 isVisible 和 visibilityState 状态
4. 组件卸载时清理事件监听器

触发场景：

• 切换到其他标签页
• 最小化浏览器窗口
• 锁屏
• 使用 Alt+Tab 切换应用

应用场景：

• 视频播放器：页面隐藏时暂停视频
• 游戏：页面隐藏时暂停游戏
• 轮播图：页面隐藏时停止自动播放
• 数据更新：页面隐藏时降低更新频率
• 动画效果：页面隐藏时停止动画

异常

无异常抛出