VueUse 中文文档

Appearance

Functions ​

Core
Add-ons
Sort by
Filters

State

createGlobalState-将状态保留在全局范围内，以便在 Vue 实例之间重复使用。
createInjectionState-创建可注入到组件中的全局状态。
createSharedComposable-创建一个可在多个 Vue 实例中使用的可组合函数。
injectLocal-扩展了 inject，能够调用 provideLocal 在同一组件中提供值。
provideLocal-扩展了 provide 方法，使其能够通过调用 injectLocal 在同一组件中获取值。
useAsyncState-响应式异步状态。不会阻塞你的设置函数，并且在 promise 准备就绪后会触发更改。状态默认为 shallowRef。
useDebouncedRefHistory-具有防抖过滤器的 useRefHistory 的简写。
useLastChanged-记录最后更改的时间戳
useManualRefHistory-手动跟踪 ref 的变化历史，当使用者调用 commit() 时，也提供了撤销和重做功能。
useRefHistory-跟踪 ref 的变化历史，还提供了撤销和重做功能。
useStorage-创建一个响应式引用，用于访问和修改 LocalStorage 或 SessionStorage。
useStorageAsync-具有异步支持的响应式 Storage。
useThrottledRefHistory-带有节流过滤器的 useRefHistory 的简写。

Elements

useActiveElement-响应式地获取 document.activeElement
useDraggable-使元素可拖动。
useDropZone-创建一个可接收文件拖放的区域。
useElementBounding-获取 HTML 元素的响应式 边界框
useElementSize-获取 HTML 元素的响应式大小。ResizeObserver MDN
useElementVisibility-跟踪元素在视口内的可见性。
useIntersectionObserver-检测目标元素的可见性。
useMouseInElement-与元素相关的鼠标位置的响应式状态
useMutationObserver-监视对 DOM 树的变更。MutationObserver MDN
useParentElement-获取给定元素的父元素
useResizeObserver-报告元素内容或边框框的尺寸变化。
useWindowFocus-使用 window.onfocus 和 window.onblur 事件来动态地跟踪窗口焦点状态。
useWindowScroll-响应式窗口滚动
useWindowSize-响应式窗口大小

Browser

useBluetooth-响应式的 Web 蓝牙 API。提供与蓝牙低功耗外围设备连接和交互的能力。
useBreakpoints-响应式的视口断点。
useBrowserLocation-响应式浏览器位置
useClipboard-响应式的 Clipboard API。提供对剪贴板命令（剪切、复制和粘贴）的响应能力，以及异步读取和写入系统剪贴板的能力。访问剪贴板内容的权限受到 Permissions API 的限制。未经用户许可，不允许读取或更改剪贴板内容。
useClipboardItems-使用 剪贴板 API。提供对剪切、复制和粘贴命令的响应能力，以及异步从系统剪贴板读取和写入的功能。通过 权限 API 进行访问控制，未经用户许可，不允许读取或更改剪贴板内容。
useColorMode-使用自动数据持久化的响应式颜色模式 (dark / light / customs)。
useCssVar-操作 CSS 变量
useDark-响应式暗模式，自动数据持久化。
useEventListener-轻松使用 EventListener。在组件挂载时使用 addEventListener 进行注册，在组件卸载时自动使用 removeEventListener 进行注销。
useFavicon-响应式的网站图标
useFileDialog-轻松打开文件对话框。
useFileSystemAccess-使用 FileSystemAccessAPI 创建、读取和写入本地文件。
useFullscreen-响应式的全屏 API。它添加了方法，用于将特定元素（及其后代）呈现为全屏模式，并在不再需要时退出全屏模式。这使得可以使用用户的整个屏幕来呈现所需的内容，例如在线游戏，在全屏模式下移除所有浏览器用户界面元素和其他应用程序，直到关闭全屏模式为止。
useGamepad-提供了Gamepad API的响应式绑定。
useImage-响应式加载浏览器中的图像，您可以等待结果以显示它，或显示一个备用图像。
useMediaControls-为 audio 和 video 元素提供响应式的媒体控制。
useMediaQuery-响应式的 媒体查询。一旦您创建了一个 MediaQueryList 对象，您可以检查查询结果或在结果变化时接收通知。
useMemory-响应式内存信息。
useObjectUrl-响应式对象的 URL。
usePerformanceObserver-观察性能指标。
usePermission-响应式的 权限 API。权限 API 提供了工具，使开发人员能够在权限方面实现更好的用户体验。
usePreferredColorScheme-响应式的 prefers-color-scheme 媒体查询。
usePreferredContrast-响应式的 prefers-contrast 媒体查询。
usePreferredDark-响应式的深色主题偏好。
usePreferredLanguages-响应式的首选语言。它为Web开发人员提供了有关用户首选语言的信息。例如，这可能有助于根据用户的首选语言调整用户界面的语言，以提供更好的体验。
useScreenOrientation-响应式 屏幕方向 API。它为 Web 开发人员提供了关于用户当前屏幕方向的信息。
useScreenSafeArea-响应式 env(safe-area-inset-*)
useScriptTag-创建一个脚本标签，支持在组件卸载时自动卸载（删除）脚本标签。
useShare-响应式 Web Share API。浏览器提供了可以分享文本或文件内容的功能。
useStyleTag-在 中注入响应式的 style 元素。
useTextareaAutosize-根据内容自动更新 textarea 的高度。
useTextDirection-元素文本的响应式 dir。
useTitle-响应式的文档标题。
useWakeLock-响应式 屏幕唤醒锁定 API。提供了一种防止设备在应用程序需要持续运行时变暗或锁定屏幕的方法。
useWebWorker-简单的Web Workers注册和通信。
useWebWorkerFn-使用简单的语法，在不阻塞UI的情况下运行昂贵的函数，使用Promise。这是 alewin/useWorker 的一个端口。

Sensors

onClickOutside-监听元素外的点击事件。适用于模态框或下拉菜单等场景。
onKeyStroke-监听键盘按键事件。
onLongPress-监听元素上的长按事件。
onStartTyping-用户在不可编辑的元素上开始输入时触发。
useBattery-响应式的 Battery Status API，更常被称为电池 API，提供有关系统电池充电级别的信息，并允许在电池级别或充电状态发生变化时发送事件通知。这可以用来调整您的应用程序的资源使用，以减少电池耗尽时的电池消耗，或在电池耗尽之前保存更改，以防止数据丢失。
useDeviceMotion-响应式 DeviceMotionEvent。提供有关设备位置和方向变化速度的信息给 Web 开发者。
useDeviceOrientation-响应式 DeviceOrientationEvent。为 Web 开发者提供来自运行网页的设备的物理方向信息。
useDevicesList-响应式 enumerateDevices 列出可用的输入/输出设备。
useElementByPoint-根据点获取响应式元素。
useElementHover-获取元素的响应式悬停状态。
useFocus-用于跟踪或设置 DOM 元素的焦点状态的响应式工具。状态变化反映了目标元素是否为焦点元素。从外部设置响应式值将触发对应于 true 和 false 值的 focus 和 blur 事件。
useFocusWithin-用于跟踪一个元素或其子元素是否具有焦点的响应式工具。它的行为类似于 :focus-within CSS 伪类。一个常见的用例是在表单元素上，以查看其任何输入框当前是否具有焦点。
useFps-反应式 FPS（每秒帧数）。
useGeolocation-提供响应式的Geolocation API。如果用户愿意，它允许用户向 Web 应用程序提供其位置。出于隐私原因，用户需要获得报告位置信息的权限。
useIdle-跟踪用户是否处于不活动状态。
useInfiniteScroll-实现元素的无限滚动。
useKeyModifier-响应式地跟踪修饰键状态。跟踪任何支持的修饰键的状态 - 请参阅浏览器兼容性说明。
useMagicKeys-响应式按键按下状态，支持神奇按键组合。
useMouse-鼠标位置的响应式状态
useMousePressed-鼠标按下状态的响应式状态。在目标元素上触发 mousedown touchstart，在窗口上释放 mouseup mouseleave touchend touchcancel。
useNetwork-响应式地获取 网络状态。网络信息 API 提供了有关系统连接的信息，例如一般连接类型（例如，“wifi”，“cellular”等）。这可以用于根据用户的连接选择高清晰度内容或低清晰度内容。整个 API 由 NetworkInformation 接口的添加和 Navigator 接口的单个属性组成：Navigator.connection。
useOnline-响应式的在线状态。是 useNetwork 的封装。
usePageLeave-响应式状态，用于显示鼠标是否离开页面。
useParallax-轻松创建视差效果。它使用 useDeviceOrientation，如果不支持方向，则回退到 useMouse。
usePointer-响应式的 指针状态。
usePointerSwipe-基于 PointerEvents 的响应式滑动检测。
useScroll-响应式的滚动位置和状态。
useScrollLock-锁定元素的滚动。
useSwipe-基于 TouchEvents 的响应式滑动检测。
useTextSelection-基于 Window.getSelection 响应式地跟踪用户的文本选择。

Network

useEventSource-一个 EventSource 或 Server-Sent-Events 实例打开了与 HTTP 服务器的持久连接，服务器以 text/event-stream 格式发送事件。
useFetch-响应式的 Fetch API 提供了中止请求、在请求发送之前拦截请求、在 URL 变化时自动重新获取请求，并创建具有预定义选项的自定义 useFetch 的功能。
useWebSocket-响应式 WebSocket 客户端。

Animation

useInterval-在每个间隔上增加的响应式计数器
useIntervalFn-带有控制功能的 setInterval 包装器
useNow-响应式的当前日期实例。
useRafFn-在每次 requestAnimationFrame 上调用函数。具有暂停和恢复控制。
useTimeout-在一定时间后更新值，并带有控制功能。
useTimeoutFn-带有控制选项的 setTimeout 函数的封装
useTimestamp-响应式的当前时间戳
useTransition-值之间的过渡效果

Component

computedInject-结合 computed 和 inject 使用
createReusableTemplate-在组件作用域内定义并复用模板。
createTemplatePromise-将模板作为 Promise。适用于构建自定义对话框、模态框、提示框等。
templateRef-将 ref 绑定到模板元素的简写方式。
tryOnBeforeMount-安全的 onBeforeMount。如果在组件生命周期内，调用 onBeforeMount()，如果不是，直接调用函数。
tryOnBeforeUnmount-安全的 onBeforeUnmount。如果在组件生命周期内，调用 onBeforeUnmount()，如果不是，不执行任何操作。
tryOnMounted-安全的 onMounted。如果在组件生命周期内，调用 onMounted()，如果不是，直接调用函数。
tryOnScopeDispose-安全的 onScopeDispose。如果在效果范围生命周期内，调用 onScopeDispose()，如果不是，不执行任何操作。
tryOnUnmounted-安全的 onUnmounted。如果在组件生命周期内，调用 onUnmounted()，如果不是，不执行任何操作。
unrefElement-从 ref 或 Vue 组件实例中检索基础 DOM 元素。
useCurrentElement-将当前组件的 DOM 元素作为 ref 返回。
useMounted-在 ref 中表示组件是否已挂载。
useTemplateRefsList-用于将 refs 绑定到 v-for 内的模板元素和组件的快捷方式。
useVirtualList-轻松创建虚拟列表。虚拟列表（有时称为 _virtual scrollers_）允许您高效地渲染大量项目。它们只渲染必要的最小数量的 DOM 节点，以通过使用 wrapper 元素模拟容器元素的完整高度来显示 container 元素中的项目。
useVModel-简化 v-model 绑定的简写方式，将 props + emit 转换为 ref
useVModels-props 的 v-model 绑定的简写方式。可以将其视为 toRefs(props)，但是对属性的更改也会触发 emit。

Watch

until-等待变化的一次性 Promise
watchArray-监视数组的添加和移除。
watchAtMost-watch 监听器带有触发次数限制。
watchDebounced-延迟触发的监听器
watchDeep-使用 { deep: true } 监听值的简写形式。
watchIgnorable-可忽略的监听器
watchImmediate-使用 { immediate: true } 监听值的简写形式。
watchOnce-仅触发一次的 watch。
watchPausable-可暂停的 watch
watchThrottled-节流式监视。
watchTriggerable-可手动触发的 Watch
watchWithFilter-带有额外 EventFilter 控制的 watch。
whenever-监视值为真的简写形式。

Reactivity

computedAsync-用于异步函数的计算属性
computedEager-即时计算的计算属性，没有延迟评估。
computedWithControl-显式定义计算属性的依赖关系。
extendRef-向 Ref 添加额外属性。
reactify-将普通函数转换为响应式函数。转换后的函数接受引用作为其参数，并返回一个 ComputedRef，具有正确的类型。
reactifyObject-将 reactify 应用于对象
reactiveComputed-响应式计算对象。与 computed 返回 ref 不同，reactiveComputed 返回一个响应式对象。
reactiveOmit-从响应式对象中动态地排除字段。
reactivePick-从响应式对象中动态地选择字段。
refAutoReset-一个在一段时间后将重置为默认值的 ref。
refDebounced-对 ref 的更新进行防抖。
refDefault-将默认值应用于 ref。
refThrottled-限制 ref 值的变化频率。
refWithControl-对 ref 及其响应性进行细粒度控制。
syncRef-双向引用同步。
syncRefs-将目标引用与源引用保持同步
toReactive-将 ref 转换为响应式对象。还可以创建一个“可交换”的响应式对象。
toRef-将值、ref 或 getter 规范化为 ref 或 computed。
toRefs-扩展了 toRefs，还接受对象引用的 refs。
toValue-获取值、ref 或 getter 的值。

Array

useArrayDifference-获取两个数组的差集的响应式结果
useArrayEvery-响应式 Array.every
useArrayFilter-reactive Array.filter
useArrayFind-响应式 Array.find。
useArrayFindIndex-响应式 Array.findIndex
useArrayFindLast-响应式 Array.findLast。
useArrayIncludes-响应式 Array.includes。
useArrayJoin-响应式 Array.join。
useArrayMap-响应式 Array.map。
useArrayReduce-响应式 Array.reduce。
useArraySome-响应式 Array.some。
useArrayUnique-响应式唯一数组。
useSorted-响应式排序数组

Time

useDateFormat-根据传入的令牌字符串获取格式化日期，灵感来自 dayjs。
useTimeAgo-响应式的相对时间。当时间发生变化时，自动更新相对时间字符串。

Utilities

createEventHook-用于创建事件钩子的实用工具
createUnrefFn-创建一个普通函数，接受 ref 和原始值作为参数。
get-用于访问 ref.value 的简写方式
isDefined-用于 Ref 的非空检查类型守卫。
makeDestructurable-使对象和数组具有等价的解构性能。详见这篇博文获取更多详情。
set-ref.value = x 的简写。
useAsyncQueue-依次执行每个异步任务，并将当前任务的结果传递给下一个任务
useBase64-响应式的 Base64 转换。 支持 plain text
useCached-使用自定义比较器缓存一个 ref。
useCloned-对 ref 进行响应式克隆。默认情况下，它使用 JSON.parse(JSON.stringify()) 进行克隆。
useConfirmDialog-创建事件钩子以支持模态框和确认对话框链。
useCounter-基础计数器，带有工具函数。
useCycleList-循环遍历一个项目列表。
useDebounceFn-延迟执行函数。
useEventBus-一个基本的事件总线。
useMemoize-缓存依赖于参数的函数结果，并保持其响应性。它还可以用于异步函数，并将重用现有的 promises 来避免同时获取相同的数据。
useOffsetPagination-响应式的偏移分页。
usePrevious-保存 ref 的先前值。
useStepper-提供构建多步骤向导界面的辅助工具。
useSupported-sSR 兼容性检测 isSupported
useThrottleFn-节流执行函数。特别适用于限制事件处理程序在调整大小和滚动等事件上的执行频率。
useTimeoutPoll-使用超时来轮询某些内容。在最后一个任务完成后触发回调。
useToggle-一个带有实用功能的布尔切换器。
useToNumber-将字符串 ref 转换为数字。
useToString-将 ref 转换为字符串。

@Electron

useIpcRenderer-提供 ipcRenderer 及其所有 API。
useIpcRendererInvoke-响应式的 ipcRenderer.invoke API 结果。使异步操作看起来像同步的。
useIpcRendererOn-轻松使用 ipcRenderer.on，并在组件卸载时自动移除监听器 ipcRenderer.removeListener。
useZoomFactor-响应式的 WebFrame 缩放因子。
useZoomLevel-响应式的 WebFrame 缩放级别。

@Firebase

useAuth-响应式的 Firebase Auth 绑定。它提供了一个响应式的 user 和 isAuthenticated，因此您可以轻松地对用户的身份验证状态变化做出反应。
useFirestore-响应式的 Firestore 绑定。使得始终将本地数据与远程数据库同步变得简单直观。
useRTDB-响应式的 Firebase 实时数据库 绑定。使得始终将本地数据与远程数据库同步变得简单直观。

@Head

createHead-用于创建 Head Manager 实例。
useHead-用于更新 head meta 标记。

@Integrations

useAxios-对 axios 的封装。
useChangeCase-对 change-case 的响应式封装。
useCookies-对 universal-cookie 的包装。
useDrauu-这是 drauu 的响应式实例。
useFocusTrap-这是 focus-trap 的响应式封装。
useFuse-使用 Fuse.js 组合式轻松实现模糊搜索。
useJwt-jwt-decode 的封装。
useNProgress-nprogress 的响应式封装。
useQRCode-qrcode 的封装。
useSortable-sortable 的封装。

@Math

createGenericProjection-createGenericProjection 是 createProjection 的通用版本。它接受一个自定义的投影函数，用于映射任意类型的域。
createProjection-从一个域映射到另一个域的响应式数值投影。
logicAnd-AND 条件的响应式封装。
logicNot-NOT 条件的响应式封装。
logicOr-OR 条件的响应式封装。
useAbs-响应式 Math.abs。
useAverage-响应式地获取数组的平均值。
useCeil-响应式 Math.ceil
useClamp-在两个其他值之间响应式地夹取一个值。
useFloor-响应式 Math.floor
useMath-响应式 Math 方法
useMax-响应式 Math.max
useMin-响应式 Math.min
usePrecision-在数字上响应式的设置精度。
useProjection-从一个域映射到另一个域的响应式数值投影。
useRound-响应式 Math.round
useSum-响应式地获取数组的总和。
useTrunc-响应式 Math.trunc

@Motion

useElementStyle-用于将响应式对象同步到目标元素 CSS 样式。
useElementTransform-用于将反应式对象同步到目标元素 CSS 转换。
useMotion-使您的组件拥有动效。
useMotionProperties-用于访问目标元素的 Motion 属性。
useMotionVariants-用于处理 Variants 状态和选择。
useSpring-spring 动画。

@Router

useRouteHash-对响应式的 route.hash 的简写。
useRouteParams-对响应式的 route.params 的简写。
useRouteQuery-对响应式的 route.query 的简写。

@RxJS

from-rxJS 的 from() 和 fromEvent() 的包装器，使它们能够接受 ref。
toObserver-sugar function to convert a ref into an RxJS Observer
useExtractedObservable-从一个或多个组合式中提取并使用 RxJS Observable，返回一个 ref，并在组件卸载时自动取消订阅。
useObservable-使用 RxJS Observable，返回一个 ref，并在组件卸载时自动取消订阅。
useSubject-将 RxJS Subject 绑定到一个 ref 上，并在两者之间传播值变化。
useSubscription-使用 RxJS Subscription，无需担心取消订阅或创建内存泄漏。
watchExtractedObservable-监视从一个或多个组合式中提取的 RxJS Observable 的值。

@SchemaOrg

createSchemaOrg-创建 schema.org Manager 实例。
useSchemaOrg-用于更新 schema.org.

@Sound

useSound-用于播放音效。

Released under the MIT License.

Copyright © 2020-PRESENT Anthony Fu and VueUse contributors