2.2 Elements -- useDocumentVisibility

2.2 Elements – useDocumentVisibility

https://vueuse.org/core/useDocumentVisibility/

作用

响应式的跟踪网页的可见状态。监听visibilitychange事件，结果为visible和hidden。

https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilityState

官方示例

import { useDocumentVisibility } from '@vueuse/core'

const visibility = useDocumentVisibility()

无渲染组件使用如下

<UseDocumentVisibility v-slot="{ visibility }">
  Document Visibility: {{ visibility }}
</UseDocumentVisibility>

源码分析

export function useDocumentVisibility({ document = defaultDocument }: ConfigurableDocument = {}): Ref<DocumentVisibilityState> {
  
  if (!document)
    return ref('visible')

  const visibility = ref(document.visibilityState)

  useEventListener(document, 'visibilitychange', () => {
    visibility.value = document.visibilityState
  })

  return visibility

⚠️：结果为visible和hidden。

代码没有需要解释的地方，但是个人意见，从函数名来看，这个函数直接返回true和false会更加直接易懂。