useDocumentVisibility 源码解读

官方文档

使用demo

import { useDocumentVisibility } from '@vueuse/core';
const visibility = useDocumentVisibility();

源码精简

import type { Ref } from 'vue-demi'
import { ref } from 'vue-demi'
import { useEventListener } from '../useEventListener'
import type { ConfigurableDocument } from '../_configurable'
import { defaultDocument } from '../_configurable'

const defaultDocument = typeof window !== 'undefined' ? window.document : undefined
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
}