> For the complete documentation index, see [llms.txt](https://laterly.gitbook.io/hooks-vue3/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://laterly.gitbook.io/hooks-vue3/usedocumentvisibility.md).

# useDocumentVisibility

#### 基础用法

```html
<template>
  <div>Hello World!</div>
</template>

<script setup lang="ts">
import { watchEffect } from "vue";
import { useDocumentVisibility } from "hooks-vue3";
const visibility = useDocumentVisibility();
watchEffect(() => {
  // 根据可见性状态执行不同的操作
  if (visibility.value === "hidden") {
    // 页面不可见
    console.log("页面不可见");
  } else {
    // 页面可见
    console.log("页面可见");
  }
});
</script>
```

### API

```typescript
const visibility = useDocumentVisibility();
```

### 参数

```typescript
type VisibilityState = 'visible' | 'hidden' | 'prerender' | undefined;

function useDocumentVisibility(): Ref<VisibilityState>

```