VueUse 中文网

主题

函数 ​

¥Functions

核心
插件
排序
过滤

传感器

onClickOutside-监听元素外部的点击。对于模态或下拉菜单很有用。
onElementRemoval-当元素或任何包含它的元素被删除时触发。
onKeyStroke-聆听键盘击键。
onLongPress-聆听对某个元素的长按。
onStartTyping-当用户开始在不可编辑的元素上键入时触发。
useBattery-反应式 电池状态 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-反应式 地理定位 API。如果用户愿意，它允许用户向网络应用提供他们的位置。出于隐私原因，需要获得用户报告位置信息的许可。
useIdle-跟踪用户是否处于非活动状态。
useInfiniteScroll-元素的无限滚动。
useKeyModifier-反应式 修饰符状态。跟踪任何 支持的修饰符 的状态 - 请参阅浏览器兼容性说明。
useMagicKeys-反应式按键按下状态，具有神奇按键组合支持。
useMouse-反应式鼠标位置
useMousePressed-反应式鼠标按下状态。由目标元素上的 mousedown touchstart 触发，并由窗口上的 mouseup mouseleave touchend touchcancel 释放。
useNetwork-反应式 网络状态。网络信息 API 根据一般连接类型（例如 'wifi'、'cellular' 等）提供有关系统连接的信息。这可用于根据用户的连接选择高清内容或低清晰度内容。整个 API 包括添加 NetworkInformation 接口和 Navigator 接口的单个​​属性：导航器.连接。
useOnline-反应式在线状态。useNetwork 的封装纸。
usePageLeave-反应式状态显示鼠标是否离开页面。
useParallax-轻松创建视差效果。如果不支持方向，它使用 useDeviceOrientation 并回退到 useMouse。
usePointerSwipe-基于 PointerEvents 的反应式滑动检测。
useScroll-反应式滚动位置和状态。
useScrollLock-锁定元素的滚动。
useSwipe-基于 TouchEvents 的反应式滑动检测。
useTextSelection-基于 Window.getSelection 反应式跟踪用户文本选择。
useUserMedia-反应式 mediaDevices.getUserMedia 流式传输。

元素

useActiveElement-反应式 document.activeElement
useDraggable-使元素可拖动。
useDropZone-创建一个可以删除文件的区域。
useElementBounding-HTML 元素的响应式 边界框
useElementSize-HTML 元素的反应式大小。调整大小观察者 MDN
useElementVisibility-跟踪视口中元素的可见性。
useIntersectionObserver-检测目标元素的可见性。
useMouseInElement-与元素相关的反应式鼠标位置
useMutationObserver-观察对 DOM 树所做的更改。MDN 突变观察者
useParentElement-获取给定元素的父元素
useResizeObserver-报告元素内容或边框尺寸的更改
useWindowFocus-使用 window.onfocus 和 window.onblur 事件反应式性地跟踪窗口焦点。
useWindowScroll-反应式窗口滚动
useWindowSize-反应式窗口大小

动画

useInterval-反应式计数器在每个时间间隔都会增加
useIntervalFn-带控件的 setInterval 封装
useNow-反应式当前 Date 实例。
useRafFn-每个 requestAnimationFrame 上调用函数。具有暂停和恢复控制。
useTimeout-使用控件在给定时间后更新值。
useTimeoutFn-带控件的 setTimeout 封装。
useTimestamp-无功电流时间戳
useTransition-值之间的转换

反应式性

computedAsync-为异步函数计算
computedEager-预计算而无需惰性求值。
computedWithControl-显式定义计算的依赖。
createRef-根据 deep 参数返回 deepRef 或 shallowRef。
extendRef-向 Ref 添加额外属性。
reactify-将普通函数转换为反应式函数。转换后的函数接受 refs 作为其参数，并返回一个具有正确类型的 ComputedRef。
reactifyObject-将 reactify 应用于对象
reactiveComputed-计算反应式对象。reactiveComputed 返回一个响应式对象，而不是像 computed 那样返回引用。
reactiveOmit-反应式地省略反应式对象中的字段。
reactivePick-从反应式性对象中反应式性地选取字段。
refAutoReset-一段时间后将重置为默认值的参考。
refDebounced-参考值的去抖动执行。
refDefault-将默认值应用于参考。
refManualReset-创建一个具有手动重置功能的引用。
refThrottled-参考值的节流变化。
refWithControl-对 ref 及其反应式性的细粒度控制。
syncRef-双向参考同步。
syncRefs-使目标引用与源引用保持同步
toReactive-将 ref 转换为响应式。还可以创建 "swapable" 反应式对象。
toRef-将 value/ref/getter 标准化为 ref 或 computed。
toRefs-扩展 toRefs 也接受对象的引用。
toValue-获取 value/ref/getter 的值。

实用工具

createEventHook-用于创建事件钩子的工具
createUnrefFn-创建一个接受 ref 和原始值作为参数的普通函数。通过正确的类型返回与未转换的函数返回的值相同的值。
get-访问 ref.value 的简写
isDefined-ref 的非无效检查类型保护。
makeDestructurable-使对象和数组同时可同构解构。详细信息请参见 这个博客。
set-ref.value = x 的简写
useAsyncQueue-顺序执行每个异步任务并将当前任务结果传递给下一个任务
useBase64-反应式 base64 转换。支持纯文本、缓冲区、文件、画布、对象、映射、集和图片。
useCached-使用自定义比较器缓存引用。
useCloned-参考的反应式克隆。默认情况下，它使用 JSON.parse(JSON.stringify()) 进行克隆。
useConfirmDialog-创建事件钩子以支持模式和确认对话框链。
useCounter-具有实用函数的基本计数器。
useCycleList-循环浏览项目列表。
useDebounceFn-函数的执行去抖动。
useEventBus-基本的事件总线。
useMemoize-根据参数缓存函数的结果并使其保持反应式。它还可用于异步函数，并将重用现有的 Promise 以避免同时获取相同的数据。
useOffsetPagination-反应式偏移分页。
usePrevious-保存 ref 的前一个值。
useStepper-提供用于构建多步骤向导界面的辅助程序。
useSupported-SSR 兼容性 isSupported
useThrottleFn-限制函数的执行。对于调整大小和滚动等事件的处理程序的执行速率限制特别有用。
useTimeoutPoll-使用超时来轮询某些内容。它将在最后一个任务完成后触发回调。
useToggle-具有实用函数的布尔切换器。
useToNumber-反应式地将字符串引用转换为数字。
useToString-反应式性地将引用转换为字符串。

数组

useArrayDifference-reactive 获取两个数组的数组差异。
useArrayEvery-反应式 Array.every
useArrayFilter-反应式 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-反应式排序数组

时间

useCountdown-useIntervalFn 的封装器，提供倒计时器。
useDateFormat-根据传入的 token 字符串获取格式化日期，灵感来自 dayjs。
useTimeAgo-反应式时间之前。当时间改变时自动更新 time ago 字符串。
useTimeAgoIntl-响应式开发，支持国际化。当时间改变时自动更新 time ago 字符串。由 Intl.RelativeTimeFormat 提供支持。

浏览器

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

状态

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

监视

until-promise 一次性观察变化
watchArray-观察有添加和删除的数组。
watchAtMost-watch 为触发次数。
watchDebounced-去抖监视
watchDeep-{deep: true} 监视值的简写
watchIgnorable-可忽略的监视
watchImmediate-{immediate: true} 监视值的简写
watchOnce-使用 { once: true } 观察值的简写。回调触发一次后，监视器将停止。有关完整详细信息，请参阅 Vue 文档。
watchPausable-可暂停监视
watchThrottled-节流监视。
watchTriggerable-可手动触发的监视
watchWithFilter-watch 带有附加的 EventFilter 控件。
whenever-观察值是否为真值的简写。

组件

computedInject-结合计算和注入
createReusableTemplate-在组件范围内定义和重用模板。
createTemplatePromise-模板作为 promise。对于构建自定义对话框、模态框、Toast 等很有用。
templateRef-将 ref 绑定到模板元素的简写。
tryOnBeforeMount-安全 onBeforeMount。如果它在组件生命周期内，则调用 onBeforeMount()，如果不在组件生命周期内，则仅调用该函数
tryOnBeforeUnmount-安全 onBeforeUnmount。如果 onBeforeUnmount() 在组件生命周期内，则调用 onBeforeUnmount()，如果不在组件生命周期内，则不执行任何操作
tryOnMounted-安全 onMounted。如果它在组件生命周期内，则调用 onMounted()，如果不在组件生命周期内，则仅调用该函数
tryOnScopeDispose-安全 onScopeDispose。如果 onScopeDispose() 在效果范围生命周期内，则调用 onScopeDispose()，如果不在，则不执行任何操作
tryOnUnmounted-安全 onUnmounted。如果 onUnmounted() 在组件生命周期内，则调用 onUnmounted()，如果不在组件生命周期内，则不执行任何操作
unrefElement-从 Vue 引用或组件实例中检索底层 DOM 元素
useCurrentElement-获取当前组件的 DOM 元素作为引用。
useMounted-参考文献中的安装状态。
useTemplateRefsList-将 ref 绑定到 v-for 内的模板元素和组件的简写。
useVirtualList-轻松创建虚拟列表。虚拟列表（有时称为 虚拟滚动条）允许你高效地渲染大量项目。它们仅通过使用 wrapper 元素模拟容器元素的完整高度来渲染显示 container 元素内的项目所需的最小数量的 DOM 节点。
useVModel-¥useVModel
useVModels-¥useVModels

网络

useEventSource-EventSource 或 服务器发送的事件 实例打开与 HTTP 服务器的持久连接，该服务器以文本/事件流格式发送事件。
useFetch-reactive 获取 API 提供了中止请求、在触发请求之前拦截请求、在 url 更改时自动重新获取请求以及使用预定义选项创建你自己的 useFetch 的函数。
useWebSocket-反应式 WebSocket 客户端。

@Electron

useIpcRenderer-提供 ipcRenderer 及其所有 API。
useIpcRendererInvoke-反应式 ipcRenderer.invoke API 结果。使异步操作看起来同步。
useIpcRendererOn-轻松使用 ipcRenderer.on，卸载后自动使用 ipcRenderer.removeListener。
useZoomFactor-反应式 WebFrame 缩放系数。
useZoomLevel-反应式 WebFrame 缩放级别。

@Firebase

useAuth-反应式 Firebase 身份验证 结合。它提供了反应式 user 和 isAuthenticated，因此你可以轻松地对用户身份验证状态的变化做出反应。
useFirestore-反应式 火库 结合。使本地数据始终与远程数据库保持同步变得简单。
useRTDB-¥useRTDB

@Head

createHead-create the head manager instance.
useHead-update head meta tags reactively.

@Motion

useElementStyle-sync a reactive object to a target element CSS styling
useElementTransform-sync a reactive object to a target element CSS transform.
useMotion-putting your components in motion.
useMotionProperties-access Motion Properties for a target element.
useMotionVariants-handle the Variants state and selection.
useSpring-spring animations.

@RxJS

from-¥from / fromEvent
toObserver-sugar 函数将 ref 转换为 RxJS 观察者。
useExtractedObservable-使用从一个或多个可组合项中提取的 RxJS Observable，返回 ref，并在卸载组件时自动取消订阅。
useObservable-使用 RxJS Observable，返回 ref，并在组件卸载时自动取消订阅。
useSubject-将 RxJS Subject 绑定到 ref 并以双向方式传播值更改。
useSubscription-使用 RxJS Subscription 无需担心取消订阅或造成内存泄漏。
watchExtractedObservable-观察从一个或多个可组合项中提取的 RxJS Observable 的值。

@SchemaOrg

createSchemaOrg-create the schema.org manager instance.
useSchemaOrg-update schema.org reactively.

@Sound

useSound-play sound effects reactively.

@数学

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。

@路由

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

@集成

useAxios-axios 的封装。
useChangeCase-change-case 的反应式封装。
useDrauu-drauu 的反应式实例。
useFocusTrap-focus-trap 的反应式封装。
useFuse-使用 Fuse.js 的可组合项轻松实现模糊搜索。
useIDBKeyval-¥useIDBKeyval
useJwt-jwt-decode 的封装。
useNProgress-¥useNProgress
useQRCode-¥useQRCode
useSortable-sortable 的封装。