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-为 游戏手柄 API 提供响应式绑定
useImage-在浏览器中响应式加载图像
useMediaControls-audio 和 video 元素的响应式媒体控件
useMemory-响应式内存信息
useObjectUrl-表示对象的响应式 URL
usePerformanceObserver-观察性能指标
usePreferredContrast-响应式 prefers-contrast 媒体查询
usePreferredDark-响应式深色主题偏好
useScreenSafeArea-响应式 env(safe-area-inset-*)
useScriptTag-创建脚本标签
useSSRWidth-用于设置全局视口宽度，该宽度将在渲染依赖于视口宽度的 SSR 组件时使用，例如 useMediaQuery 或 useBreakpoints
useStyleTag-在 head 中注入响应式 style 元素
useTextareaAutosize-根据内容自动更新文本区域的高度
useTextDirection-元素文本的响应式 dir
useTitle-响应式文档标题
useWebWorker-简单的 Web Workers 注册和通信
useWebWorkerFn-运行耗时函数而不会阻塞 UI

传感器

onClickOutside-监听元素外部的点击事件
onElementRemoval-当元素或包含它的任何元素被移除时触发
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-响应式当前 Date 实例
useRafFn-在每个 requestAnimationFrame 上调用函数
useTimeout-在给定时间后更新值并带有控制
useTimeoutFn-带有控制的 setTimeout 包装器
useTimestamp-响应式当前时间戳
useTransition-值之间的过渡

组件

computedInject-结合 computed 和 inject
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-在 v-for 中将 ref 绑定到模板元素和组件的简写
useVirtualList-轻松创建虚拟列表
useVModel-v-model 绑定的简写
useVModels-props v-model 绑定的简写

侦听

until-承诺一次性监听更改
watchArray-监听数组的添加和移除
watchAtMost-带有触发次数的 watch
watchDebounced-防抖监听
watchDeep-带有 {deep: true} 监听值的简写
watchIgnorable-可忽略的监听
watchImmediate-带有 {immediate: true} 监听值的简写
watchOnce-带有 { once: true } 监听值的简写
watchPausable-可暂停的监听
watchThrottled-节流监听
watchTriggerable-可手动触发的监听
watchWithFilter-带有额外 EventFilter 控制的 watch
whenever-监听值为 truthy 的简写

响应性

computedAsync-异步函数的 computed
computedEager-没有延迟评估的 eager computed
computedWithControl-明确定义 computed 的依赖项
createRef-根据 deep 参数返回 deepRef 或 shallowRef
extendRef-为 Ref 添加额外属性
reactify-将普通函数转换为响应式函数
reactifyObject-将 reactify 应用于对象
reactiveComputed-computed 响应式对象
reactiveOmit-响应式地从响应式对象中省略字段
reactivePick-响应式地从响应式对象中选择字段
refAutoReset-在一段时间后会重置为默认值的 ref
refDebounced-防抖执行 ref 值
refDefault-为 ref 应用默认值
refManualReset-创建具有手动重置功能的 ref
refThrottled-节流更改 ref 值
refWithControl-对 ref 及其响应性进行细粒度控制
syncRef-双向 ref 同步
syncRefs-使目标 ref 与源 ref 保持同步
toReactive-将 ref 转换为响应式
toRef-将 value/ref/getter 规范化为 ref 或 computed
toRefs-扩展的 toRefs，也接受对象的 refs

数组

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

时间

useCountdown-为 useIntervalFn 提供倒计时器的包装器
useDateFormat-根据传入的 token 字符串获取格式化日期
useTimeAgo-响应式时间之前
useTimeAgoIntl-支持 i18n 的响应式时间之前

实用工具

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-创建 head 管理器实例。
useHead-响应式更新 head 元标签。

@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-ref 的 AND 条件
logicNot-ref 的 NOT 条件
logicOr-ref 的 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() 的包装器，允许它们接受 ref
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-PRESENT Anthony Fu 和 VueUse 贡献者