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-观察性能指标
usePreferredContrast-响应式 prefers-contrast 媒体查询
usePreferredDark-响应式深色主题偏好
useScreenSafeArea-响应式 env(safe-area-inset-*)
useScriptTag-创建一个 script 标签
useSSRWidth-用于设置全局视口宽度，该宽度将在渲染依赖于视口宽度的 SSR 组件时使用，例如 useMediaQuery 或 useBreakpoints
useStyleTag-在 head 中注入响应式 style 元素
useTextareaAutosize-根据内容自动更新 textarea 的高度
useTextDirection-元素文本的响应式 dir 属性
useTitle-响应式文档标题
useWebWorker-简单的 Web Workers 注册和通信
useWebWorkerFn-运行高开销函数而不阻塞 UI

传感器

onClickOutside-监听元素外部的点击
onElementRemoval-当元素或包含它的任何元素被移除时触发
onKeyStroke-监听键盘按键
onLongPress-监听元素上的长按
onStartTyping-当用户开始在不可编辑元素上输入时触发
useDevicesList-响应式 enumerateDevices 列出可用的输入/输出设备
useDisplayMedia-响应式 mediaDevices.getDisplayMedia 流
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-将 refs 绑定到 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-用于异步函数的 computed
computedEager-没有惰性求值的立即计算
computedWithControl-显式定义计算属性的依赖项
createRef-根据 deep 参数返回 deepRef 或 shallowRef
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-将 value/ref/getter 规范化为 ref 或 computed
toRefs-扩展的 toRefs，也接受对象的 refs
toValue-获取 value/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-响应式排序数组

时间

useCountdown-useIntervalFn 的包装器，提供倒计时定时器
useDateFormat-根据传入的 tokens 字符串获取格式化的日期
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-使用 timeout 轮询某些内容
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 meta 标签。

@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-访问目标元素的 Motion Properties。
useMotionVariants-处理 Variants 状态和选择。
useSpring-弹簧动画。

@Router

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

@RxJS

from-RxJS 的 from() 和 fromEvent() 的包装器，使其可以接受 ref
toObserver-将 ref 转换为 RxJS Observer 的简写函数
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 贡献者