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
会更加直接易懂。