VueUse

外观

函数 ​

核心
附加组件
按以下排序
筛选器

状态

createGlobalState-在全局作用域中保持状态，以便在 Vue 实例之间重用
createInjectionState-创建可以注入组件的全局状态
createSharedComposable-使可组合函数可用于多个 Vue 实例
injectLocal-扩展 inject，使其能够调用 provideLocal 在同一组件中提供值
provideLocal-扩展 provide，使其能够调用 injectLocal 在同一组件中获取值
useAsyncState-响应式异步状态
useDebouncedRefHistory-useRefHistory 的简写，带有去抖动过滤器
useLastChanged-记录上次更改的时间戳
useManualRefHistory-当使用调用 commit() 时，手动跟踪 ref 的更改历史记录
useRefHistory-跟踪 ref 的更改历史记录
useStorage-创建一个响应式 ref，可用于访问和修改 LocalStorage 或 SessionStorage
useStorageAsync-带有异步支持的响应式 Storage
useThrottledRefHistory-useRefHistory 的简写，带有节流过滤器

元素

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

浏览器

useBreakpoints-响应式视口断点
useBrowserLocation-响应式浏览器位置
useColorMode-响应式颜色模式（深色/浅色/自定义），并具有自动数据持久化
useCssVar-操作 CSS 变量
useDark-响应式暗黑模式，并具有自动数据持久化
useEventListener-轻松使用 EventListener
useFavicon-响应式网站图标
useFileDialog-轻松打开文件对话框
useFileSystemAccess-使用FileSystemAccessAPI创建、读取和写入本地文件
useGamepad-提供Gamepad API的响应式绑定
useImage-响应式加载浏览器中的图像
useMediaControls-audio和video元素的响应式媒体控件
useMemory-响应式内存信息
useObjectUrl-表示对象的响应式URL
usePerformanceObserver-观察性能指标
usePreferredDark-响应式暗色主题偏好
useScreenSafeArea-响应式env(safe-area-inset-*)
useScriptTag-创建脚本标签
useStyleTag-在头部注入响应式style元素
useTextareaAutosize-根据内容自动更新文本区域的高度
useTextDirection-元素文本的响应式dir
useTitle-响应式文档标题
useWebWorker-简单的Web Workers注册和通信
useWebWorkerFn-运行耗时的函数，而不阻塞 UI

传感器

onClickOutside-侦听元素外部的点击事件
onKeyStroke-侦听键盘按键事件
onLongPress-侦听元素上的长按事件
onStartTyping-当用户开始在不可编辑元素上输入时触发
useDevicesList-响应式enumerateDevices列出可用的输入/输出设备
useElementByPoint-响应式元素按点
useElementHover-响应式元素悬停状态
useFocus-响应式实用程序，用于跟踪或设置 DOM 元素的焦点状态
useFocusWithin-响应式实用程序，用于跟踪元素或其后代是否具有焦点
useFps-响应式 FPS（每秒帧数）
useIdle-跟踪用户是否处于非活动状态
useInfiniteScroll-元素的无限滚动
useMagicKeys-响应式按键按下状态
useMouse-响应式鼠标位置
useMousePressed-响应式鼠标按下状态
useOnline-响应式在线状态
usePageLeave-响应式状态，指示鼠标是否离开页面
useParallax-轻松创建视差效果
usePointerSwipe-基于PointerEvents的响应式滑动检测
useScroll-响应式滚动位置和状态
useScrollLock-锁定元素的滚动
useSwipe-基于TouchEvents的响应式滑动检测
useTextSelection-基于Window.getSelection响应式跟踪用户文本选择

网络

useEventSource-EventSource或Server-Sent-Events实例打开与 HTTP 服务器的持久连接
useFetch-响应式Fetch API提供中止请求的能力
useWebSocket-响应式WebSocket客户端

动画

useInterval-响应式计数器在每个间隔递增
useIntervalFn-带有控件的setInterval包装器
useNow-响应式当前日期实例
useRafFn-在每次 requestAnimationFrame 调用函数
useTimeout-使用控件在给定时间后更新值
useTimeoutFn-带有控件的 setTimeout 包装器
useTimestamp-响应式当前时间戳
useTransition-在值之间进行过渡

组件

computedInject-组合计算属性和注入
createReusableTemplate-在组件作用域内定义和重用模板
createTemplatePromise-模板作为 Promise
templateRef-绑定 ref 到模板元素的简写
tryOnBeforeMount-安全的 onBeforeMount
tryOnBeforeUnmount-安全的 onBeforeUnmount
tryOnMounted-安全的 onMounted
tryOnScopeDispose-安全的 onScopeDispose
tryOnUnmounted-安全的 onUnmounted
unrefElement-从 Vue ref 或组件实例中检索底层的 DOM 元素
useCurrentElement-获取当前组件的 DOM 元素作为 ref
useMounted-ref 中的挂载状态
useTemplateRefsList-绑定 ref 到 v-for 内的模板元素和组件的简写
useVirtualList-轻松创建虚拟列表
useVModel-v-model 绑定的简写
useVModels-props v-model 绑定的简写

观察

until-用于更改的承诺式一次性观察
watchArray-观察带有添加和删除操作的数组
watchAtMost-带有触发次数的 watch
watchDebounced-防抖观察
watchDeep-使用 {deep: true} 观察值的简写
watchIgnorable-可忽略的观察
watchImmediate-使用 {immediate: true} 观察值的简写
watchOnce-仅触发一次的 watch
watchPausable-可暂停的观察
watchThrottled-节流观察
watchTriggerable-可以手动触发的观察
watchWithFilter-带有额外 EventFilter 控制的 watch
whenever-观察值是否为真值的简写

响应式

computedAsync-用于异步函数的计算属性
computedEager-无需惰性求值的急切计算属性
computedWithControl-显式定义计算属性的依赖项
extendRef-向 Ref 添加额外属性
reactify-将普通函数转换为响应式函数
reactifyObject-将 reactify 应用于对象
reactiveComputed-计算出的响应式对象
reactiveOmit-从响应式对象中响应式地省略字段
reactivePick-从响应式对象中响应式地选择字段
refAutoReset-一个将在一段时间后重置为默认值的 ref
refDebounced-对 ref 值的执行进行防抖
refDefault-将默认值应用于 ref
refThrottled-节流 ref 值的更改
refWithControl-对 ref 及其响应性进行细粒度控制
syncRef-双向 refs 同步
syncRefs-使目标 refs 与源 ref 保持同步
toReactive-将 ref 转换为响应式
toRef-将值/ref/getter 规范化为 ref 或 computed
toRefs-扩展了 toRefs，它还可以接受对象的 refs
toValue-获取值/ref/getter 的值

数组

useArrayDifference-响应式获取两个数组的差异
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-响应式排序数组

时间

useDateFormat-根据传入的标记字符串获取格式化日期
useTimeAgo-响应式时间前

工具

createEventHook-用于创建事件钩子的实用程序
createUnrefFn-使一个普通函数接受 ref 和原始值作为参数
get-访问 ref.value 的简写
isDefined-Ref 的非空检查类型保护
makeDestructurable-使对象和数组同时具有同构的可解构性
set-ref.value = x 的简写
useAsyncQueue-按顺序执行每个异步任务，并将当前任务的结果传递给下一个任务
useBase64-响应式 base64 转换
useCached-使用自定义比较器缓存 ref
useCloned-ref 的响应式克隆
useConfirmDialog-创建事件钩子以支持模态和确认对话框链
useCounter-带有实用程序函数的基本计数器
useCycleList-循环遍历项目列表
useDebounceFn-对函数的执行进行防抖
useEventBus-一个基本的事件总线
useMemoize-缓存函数的结果，具体取决于参数，并保持其响应性
useOffsetPagination-响应式偏移分页
usePrevious-保存 ref 的前一个值
useStepper-提供用于构建多步骤向导界面的帮助程序
useSupported-sSR 兼容性 isSupported
useThrottleFn-节流函数的执行
useTimeoutPoll-使用超时轮询某些内容
useToggle-带有实用程序函数的布尔开关
useToNumber-将字符串 ref 响应式地转换为数字
useToString-将 ref 响应式地转换为字符串

@Electron

useIpcRenderer-提供 ipcRenderer 及其所有 API
useIpcRendererOn-轻松使用 ipcRenderer.on，并在卸载时自动使用 ipcRenderer.removeListener
useZoomFactor-响应式 WebFrame 缩放因子
useZoomLevel-响应式 WebFrame 缩放级别

@Firebase

useAuth-响应式 Firebase Auth 绑定
useFirestore-响应式 Firestore 绑定

@Head

createHead-创建头部管理器实例。
useHead-响应式更新头部元标记。

@Integrations

useAxios-axios 的包装器
useChangeCase-change-case 的响应式包装器
useDrauu-drauu 的响应式实例
useFocusTrap-focus-trap 的响应式包装器
useFuse-使用可组合项和 Fuse.js 轻松实现模糊搜索
useJwt-用于 jwt-decode 的包装器
useNProgress-用于 nprogress 的响应式包装器
useQRCode-用于 qrcode 的包装器
useSortable-用于 sortable 的包装器

@Math

createGenericProjection-createProjection 的通用版本
createProjection-从一个域到另一个域的响应式数值投影
logicAnd-refs 的AND条件
logicNot-ref 的NOT条件
logicOr-refs 的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-访问目标元素的运动属性。
useMotionVariants-处理变体状态和选择。
useSpring-弹簧动画。

@Router

useRouteHash-route.hash 的简写形式
useRouteParams-route.params 的简写形式
useRouteQuery-route.query 的简写形式

@RxJS

from-围绕 RxJS 的 from() 和 fromEvent() 的包装器，使它们能够接受refs
toObserver-将ref转换为 RxJS 观察者 的语法糖函数
useExtractedObservable-使用从一个或多个组合物中提取的 RxJS Observable
useSubject-将 RxJS Subject 绑定到ref，并双向传播值更改
useSubscription-使用 RxJS Subscription，无需担心取消订阅或造成内存泄漏
watchExtractedObservable-监视从一个或多个组合物中提取的 RxJS Observable 的值

@SchemaOrg

createSchemaOrg-创建 schema.org 管理器实例。
useSchemaOrg-以响应式方式更新 schema.org。

@Sound

useSound-以响应式方式播放音效。

根据 MIT 许可证发布。

版权所有 © 2020-至今 Anthony Fu 和 VueUse 贡献者