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-带异步支持的响应式存储
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-响应式视口断点
使用BrowserLocation-响应式浏览器位置
使用ColorMode-响应式颜色模式（深色/浅色/自定义），并自动持久化数据
使用CssVar-操作 CSS 变量
使用Dark-响应式暗黑模式，并自动持久化数据
使用EventListener-轻松使用 EventListener
使用Favicon-响应式网站图标
使用FileDialog-轻松打开文件对话框
使用FileSystemAccess-使用FileSystemAccessAPI创建、读取和写入本地文件
使用Gamepad-提供游戏手柄 API的响应式绑定
使用Image-响应式加载浏览器中的图像
使用MediaControls-audio和video元素的响应式媒体控件
使用Memory-响应式内存信息
使用ObjectUrl-表示对象的响应式 URL
使用PerformanceObserver-观察性能指标
使用PreferredDark-响应式暗色主题偏好
使用ScreenSafeArea-响应式env(safe-area-inset-*)
使用ScriptTag-创建脚本标签
使用StyleTag-在头部注入响应式style元素
使用TextareaAutosize-根据内容自动更新文本区域的高度
使用TextDirection-元素文本的响应式dir属性
使用Title-响应式文档标题
使用WebWorker-简单的Web Workers注册和通信
使用WebWorkerFn-运行耗时的函数而不阻塞 UI

传感器

在ClickOutside-侦听元素外部的点击事件
在KeyStroke-侦听键盘按键
在LongPress-侦听元素的长按事件
在StartTyping-当用户在不可编辑元素上开始输入时触发
使用DevicesList-响应式enumerateDevices列出可用的输入/输出设备
使用ElementByPoint-响应式指定点处的元素
使用ElementHover-响应式元素的悬停状态
使用Focus-响应式实用程序，用于跟踪或设置 DOM 元素的焦点状态
使用FocusWithin-响应式实用程序，用于跟踪元素或其后代是否具有焦点
使用Fps-响应式 FPS（每秒帧数）
使用Idle-跟踪用户是否处于非活动状态
使用InfiniteScroll-元素的无限滚动
使用MagicKeys-响应式按键按下状态
使用Mouse-响应式鼠标位置
使用MousePressed-响应式鼠标按下状态
使用Online-响应式在线状态
使用PageLeave-响应式状态，指示鼠标是否离开页面
使用Parallax-轻松创建视差效果
使用PointerSwipe-基于PointerEvents的响应式滑动检测
使用Scroll-响应式滚动位置和状态
使用ScrollLock-锁定元素的滚动
使用Swipe-基于TouchEvents的响应式滑动检测
使用TextSelection-基于Window.getSelection响应式跟踪用户文本选择

网络

使用EventSource-EventSource或服务器发送事件实例打开与 HTTP 服务器的持久连接
使用Fetch-响应式Fetch API提供中止请求的功能
使用WebSocket-响应式WebSocket客户端

动画

使用Interval-响应式计数器，每隔一段时间增加一次
使用IntervalFn-带有控制功能的setInterval包装器
使用Now-响应式当前 Date 实例
使用RafFn-在每次requestAnimationFrame调用函数
使用Timeout-在给定时间后更新值，并带控制功能
使用TimeoutFn-带有控制功能的setTimeout包装器
使用Timestamp-响应式当前时间戳
使用Transition-在值之间过渡

组件

computedInject-组合计算属性和注入
createReusableTemplate-在组件作用域内定义和重用模板
createTemplatePromise-模板作为 Promise
templateRef-绑定 ref 到模板元素的简写方式
尝试OnBeforeMount-安全的onBeforeMount
尝试OnBeforeUnmount-安全的 onBeforeUnmount
尝试OnMounted-安全的 onMounted
尝试OnScopeDispose-安全的 onScopeDispose
尝试OnUnmounted-安全的 onUnmounted
unrefElement-从 Vue ref 或组件实例中获取底层的 DOM 元素
使用CurrentElement-将当前组件的 DOM 元素作为 ref 获取
使用Mounted-ref 中的挂载状态
使用TemplateRefsList-v-for 内部将 ref 绑定到模板元素和组件的简写方式
使用VirtualList-轻松创建虚拟列表
使用VModel-v-model 绑定的简写方式
使用VModels-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-双向 ref 同步
syncRefs-使目标 ref 与源 ref 保持同步
toReactive-将 ref 转换为响应式
toRef-将值/ref/getter 规范化为 ref 或 computed
toRefs-扩展的 toRefs，它也接受对象的 ref
toValue-获取值/ref/getter 的值

数组

使用ArrayDifference-响应式获取两个数组的差异
使用ArrayEvery-响应式 Array.every
使用ArrayFilter-响应式 Array.filter
使用ArrayFind-响应式 Array.find
使用ArrayFindIndex-响应式 Array.findIndex
使用ArrayFindLast-响应式 Array.findLast
使用ArrayIncludes-响应式 Array.includes
使用ArrayJoin-响应式 Array.join
使用ArrayMap-响应式 Array.map
使用ArrayReduce-响应式 Array.reduce
使用ArraySome-响应式 Array.some
使用ArrayUnique-响应式唯一数组
使用Sorted-响应式排序数组

时间

使用DateFormat-根据传入的 token 字符串获取格式化的日期
使用TimeAgo-响应式时间前

实用工具

createEventHook-用于创建事件钩子的实用程序
createUnrefFn-使一个普通函数接受 ref 和原始值作为参数
get-访问 ref.value 的简写方式
isDefined-Ref 的非空检查类型保护
makeDestructurable-使对象和数组同时具有同构的可解构性
set-ref.value = x 的简写方式
使用AsyncQueue-按顺序执行每个异步任务，并将当前任务的结果传递给下一个任务
使用Base64-响应式 base64 转换
使用Cached-使用自定义比较器缓存 ref
使用Cloned-ref 的响应式克隆
使用ConfirmDialog-创建事件钩子以支持模态和确认对话框链
使用Counter-带有实用程序函数的基本计数器
使用CycleList-循环遍历项目列表
使用DebounceFn-对函数的执行进行防抖处理
使用EventBus-一个基本的事件总线
使用Memoize-缓存函数的结果，具体取决于参数，并使其保持响应式
使用OffsetPagination-响应式偏移分页
使用Previous-保存 ref 的前一个值
使用Stepper-提供构建多步骤向导界面的帮助器
使用Supported-sSR 兼容性 isSupported
使用ThrottleFn-对函数的执行进行节流处理
使用TimeoutPoll-使用超时轮询某些内容
使用Toggle-带有实用程序函数的布尔切换器
使用ToNumber-响应式地将字符串 ref 转换为数字
使用ToString-响应式地将 ref 转换为字符串

@Electron

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

@Firebase

使用Auth-响应式 Firebase Auth 绑定
使用Firestore-响应式 Firestore 绑定

@Head

createHead-创建头部管理器实例。
使用Head-响应式更新头部元标签。

@Integrations

使用Axios-axios 的包装器
使用ChangeCase-change-case 的响应式包装器
使用Drauu-drauu 的响应式实例
使用FocusTrap-focus-trap 的响应式包装器
使用Fuse-使用可组合项和 Fuse.js 轻松实现模糊搜索
使用Jwt-jwt-decode 的包装器
使用NProgress-nprogress 的响应式包装器
使用QRCode-qrcode 的包装器

@Math

createGenericProjection-createProjection 的通用版本
createProjection-从一个域到另一个域的响应式数字投影
logicAnd-ref 的 AND 条件
logicNot-ref 的 NOT 条件
logicOr-ref 的 OR 条件
使用Abs-响应式 Math.abs
使用Average-响应式获取数组的平均值
使用Ceil-响应式 Math.ceil
使用Clamp-响应式地将值限制在两个其他值之间
使用Floor-响应式 Math.floor
使用Math-响应式 Math 方法
使用Max-响应式 Math.max
使用Min-响应式 Math.min
使用Precision-响应式设置数字的精度
使用Projection-从一个域到另一个域的响应式数字投影
使用Round-响应式 Math.round
使用Sum-响应式获取数组的和
使用Trunc-响应式 Math.trunc

@Motion

使用ElementStyle-将响应式对象同步到目标元素的 CSS 样式
使用ElementTransform-将响应式对象同步到目标元素的 CSS 变换。
使用Motion-使您的组件动起来。
使用MotionProperties-访问目标元素的运动属性。
使用MotionVariants-处理变体状态和选择。
使用Spring-弹簧动画。

@Router

使用RouteHash-route.hash 的响应式简写
使用RouteParams-route.params 的响应式简写
使用RouteQuery-route.query 的响应式简写

@RxJS

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

@SchemaOrg

createSchemaOrg-创建 schema.org 管理器实例。
使用SchemaOrg-响应式更新 schema.org。

@Sound

使用Sound-响应式播放音效。

在 MIT 许可证下发布。

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