VueUse 中文网

主题

函数 ​

🌐 Functions

核心
插件
排序
过滤

State

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

Elements

useActiveElement-响应式 document.activeElement。返回一个在焦点变化时更新的浅层 ref。
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 Bluetooth API。提供连接和与低功耗蓝牙设备交互的能力。
useBreakpoints-反应式视口断点。
useBrowserLocation-反应式浏览器位置
useClipboard-响应式 剪贴板 API。提供响应剪贴板命令（剪切、复制和粘贴）的能力，以及异步读取和写入系统剪贴板的功能。访问剪贴板内容需要通过 权限 API 授权。未经用户许可，不允许读取或修改剪贴板内容。
useClipboardItems-响应式 剪贴板 API。提供响应剪贴板命令（剪切、复制和粘贴）的能力，以及异步读取和写入系统剪贴板的功能。访问剪贴板内容需要通过 权限 API 授权。未经用户许可，不允许读取或修改剪贴板内容。
useColorMode-具有自动数据持久性的反应式颜色模式（深色/浅色/自定义）。
useCssSupports-SSR 兼容且响应式的 CSS.supports。
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-响应式 Permissions API。Permissions API 提供了工具，使开发者能够在权限管理方面实现更好的用户体验。
usePreferredContrast-响应式 prefers-contrast 媒体查询。
usePreferredDark-反应式深色主题偏好。
usePreferredLanguages-响应式 Navigator Languages。它为网页开发者提供关于用户首选语言的信息。例如，这在根据用户的首选语言调整用户界面语言以提供更好的体验时可能会非常有用。
useScreenOrientation-响应式 屏幕方向 API。它为网页开发者提供有关用户当前屏幕方向的信息。
useScreenSafeArea-反应性 env(safe-area-inset-*)
useScriptTag-创建脚本标签，支持在卸载时自动卸载（删除）脚本标签。
useShare-响应式 Web Share API。浏览器提供可以分享文本或文件内容的功能。
useSSRWidth-用于设置全局视口宽度，当渲染依赖视口宽度的 SSR 组件（如 useMediaQuery 或 useBreakpoints）时将使用该宽度
useStyleTag-在头部注入响应式 style 元素。
useTextareaAutosize-根据内容自动更新文本区域的高度。
useTextDirection-元素文本的反应性dir。
useTitle-反应式文档标题。
useWakeLock-响应式 屏幕唤醒锁 API。提供了一种方法，可以在应用需要持续运行时防止设备屏幕变暗或锁定。
useWebWorker-简单的 Web Workers 注册和通信。
useWebWorkerFn-使用简单的语法和 Promise，在不阻塞 UI 的情况下运行耗时函数。alewin/useWorker 的移植版。

Sensors

onClickOutside-监听元素外的点击事件。适用于模态框或下拉菜单。
onElementRemoval-当该元素或包含该元素的任何元素从 DOM 中移除时触发。
onKeyStroke-监听键盘按键。默认情况下，监听 window 上的 keydown 事件。
onLongPress-监听元素的长按操作。返回一个停止函数。
onStartTyping-当用户在不可编辑的元素上开始输入时触发。当用户在页面上的任何地方开始输入时，这对于自动聚焦输入字段非常有用。
useBattery-反应式 电池状态 API，更常被称为电池 API，提供有关系统电池电量的信息，并允许你通过事件通知接收电池电量或充电状态变化时的信息。可以利用此功能在电池电量低时调整应用的资源使用以减少电池消耗，或者在电池耗尽前保存更改以防止数据丢失。
useDeviceMotion-响应式 DeviceMotionEvent。为网页开发者提供关于设备位置和方向变化速度的信息。
useDeviceOrientation-响应式 DeviceOrientationEvent。为网页开发者提供运行网页的设备的物理方向信息。
useDevicesList-响应式 enumerateDevices 列出可用的输入/输出设备。
useElementByPoint-逐点反应式元素。
useElementHover-反应式元素的悬停状态。
useFocus-一个响应式工具，用于跟踪或设置 DOM 元素的焦点状态。状态变化会反映目标元素是否为当前焦点元素。从外部设置响应式值会分别触发 focus 和 blur 事件，针对 true 和 false 值。
useFocusWithin-响应式工具，用于跟踪一个元素或其子元素是否获得焦点。它旨在匹配 :focus-within CSS 伪类的行为。一个常见的使用场景是在表单元素上查看其任何输入框当前是否具有焦点。
useFps-反应式 FPS（每秒帧数）。
useGeolocation-响应式 地理位置 API。它允许用户在愿意的情况下向网页应用提供他们的位置。出于隐私原因，用户需要被请求许可以报告位置信息。
useIdle-跟踪用户是否处于非活动状态。
useInfiniteScroll-元素的无限滚动。
useKeyModifier-响应式 修饰符状态。跟踪任何 支持的修饰符 的状态——请参阅浏览器兼容性说明。
useMagicKeys-反应式按键按下状态，具有神奇按键组合支持。
useMouse-反应式鼠标位置
useMousePressed-鼠标按下的反应状态。由目标元素上的 mousedown touchstart 触发，由窗口上的 mouseup mouseleave touchend touchcancel 释放。
useNetwork-响应式网络状态。网络信息 API 提供关于系统连接的一般类型（例如，“wifi”、“移动网络”等）的信息。可以根据用户的连接情况选择高质量内容或低质量内容。整个 API 包括 NetworkInformation 接口的新增部分，以及在 Navigator 接口中新增的一个属性：Navigator.connection。
useOnline-响应式在线状态。useNetwork 的封装。
usePageLeave-反应式状态显示鼠标是否离开页面。
useParallax-轻松创建视差效果。它使用 useDeviceOrientation，如果不支持方向，则回退到 useMouse。
usePointerSwipe-基于 PointerEvents 的响应式滑动检测。
useScroll-反应式滚动位置和状态。
useScrollLock-锁定元素的滚动。
useSwipe-基于 TouchEvents 的响应式滑动检测。
useTextSelection-基于 Window.getSelection 反应性地跟踪用户文本选择。
useUserMedia-响应式 mediaDevices.getUserMedia 流式传输。

Network

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

Animation

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

Component

computedInject-将 computed 和 inject 组合。适用于根据注入的值创建计算属性。
createReusableTemplate-在组件范围内定义和重用模板。
createTemplatePromise-模板即承诺。可用于构建自定义对话框、模态窗口、提示等。
templateRef-将 ref 绑定到模板元素的简写。
tryOnBeforeMount-安全的 onBeforeMount。如果在组件生命周期内，请调用 onBeforeMount()，如果不在，则直接调用该函数
tryOnBeforeUnmount-安全的 onBeforeUnmount。如果在组件生命周期内调用，请调用 onBeforeUnmount()，否则不做任何操作
tryOnMounted-安全的 onMounted。如果在组件生命周期内，请调用 onMounted()，如果不在，就直接调用该函数
tryOnScopeDispose-安全的 onScopeDispose。如果它在效果作用域生命周期内，请调用 onScopeDispose()，否则不做任何操作
tryOnUnmounted-安全的 onUnmounted。如果在组件生命周期内调用，请调用 onUnmounted()，否则不做任何操作
unrefElement-从 Vue 引用或组件实例中检索底层 DOM 元素
useCurrentElement-获取当前组件的 DOM 元素作为引用。
useMounted-参考文献中的安装状态。
useTemplateRefsList-在 v-for 内将引用绑定到模板元素和组件的简写。
useVirtualList-轻松创建虚拟列表。虚拟列表（有时称为 _虚拟滚动器_）允许你高效地渲染大量项目。它们仅渲染显示 container 元素内项目所需的最少 DOM 节点，通过使用 wrapper 元素模拟容器元素的完整高度。
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-使用 { once: true } 观察值的简写。一旦回调触发一次，监视器将会停止。
watchPausable-可暂停监视
watchThrottled-节流监视器。回调函数将在指定的时间间隔内最多被调用一次。
watchTriggerable-可手动触发的监视
watchWithFilter-watch 带有额外的 EventFilter 控制。
whenever-观察值是否为真值的简写。

Reactivity

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

Array

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-反应式排序数组

Time

useCountdown-以秒为单位的响应式倒计时器。
useDateFormat-根据传入的标记字符串获取格式化日期，灵感来自 dayjs。
useTimeAgo-响应时间。时间变化时自动更新时间显示字符串。
useTimeAgoIntl-支持 i18n 的实时显示时间功能。当时间变化时，时间显示字符串会自动更新。由 Intl.RelativeTimeFormat 提供支持。

Utilities

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-反应式性地将引用转换为字符串。

@Electron

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

@Firebase

useAuth-响应式 Firebase Auth 绑定。它提供了一个响应式的 user 和 isAuthenticated，让你可以轻松地对用户认证状态的变化作出反应。
useFirestore-响应式 Firestore 绑定。让你可以轻松 始终保持本地数据与远程数据库同步。
useRTDB-响应式 Firebase Realtime Database 绑定。使得 始终保持本地数据与远程数据库同步 变得简单。

@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-糖函数将 ref 转换为 RxJS Observer。
useExtractedObservable-使用从一个或多个 composable 中提取的 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 的简写。当 ref 变化时更新 URL 查询参数。

@集成

useAxios-axios 的封装器。
useChangeCase-针对 change-case 的响应式封装。
useDrauu-针对 drauu 的响应式实例。
useFocusTrap-针对 focus-trap 的响应式封装。
useFuse-使用 Fuse.js 的可组合函数轻松实现模糊搜索。
useIDBKeyval-idb-keyval 的封装器。
useJwt-jwt-decode 的封装器。
useNProgress-针对 nprogress 的响应式封装。
useQRCode-qrcode 的封装器。
useSortable-sortable 的封装器。