“vueuse“ 中文索引与用例

vueuse 是一个用于 vue 项目中的常用工具集，一些知名前端项目如 ElementUI-plus 等中都有它的声影，基于该项目可以很容易地进行封装，实现更加具体地功能。该工具集也是目前同类库中星最多的项目。不过至今为止，中文社区不是怎么活跃，可参考的资料较少.

核心功能

动画

功能/链接	作用	用例
useInterval	每隔一段时间，响应式数器增加	【1】
useIntervalFn	带有控件的 setInterval 的包装	【2】
useNow	响应式当前 Data 实例	【3】
useRafFn	在每个requestAnimationFrame上调用函数	【4】
useTimeout	使用控件在给定时间后更新值	【5】
useTimeoutFn	带有控件的setTimeout的包装	【6】
useTimestamp	响应式当前时间戳	【7】
useTransition	值之间的转换	【8】

浏览器

功能/链接	作用	用例
useActiveElement	响应式 document.activeElement	【9】
useBreakpoints	响应式 viewport 断点	【10】
useBrowserLocation	响应式 浏览器位置	【11】
useClipboard	响应式 Clipboard（剪贴板） API	【12】
useColorMode	具有自动数据持久性的响应式 颜色模式 (dark / light / customs)	【13】
useCssVar	操纵CSS变量	【14】
useDark	具有自动数据持久性响应式 dark 模式	【15】
useEventListener	轻松使用 EventListener（事件监听器）	【16】
useEyeDropper	响应式 EyeDropper API	【17】
useFavicon	响应式 图标	【18】
useFetch	响应式提供提供中止请求的能力的 Fetch API	【19】
useFullscreen	响应式 Fullscreen（全屏） API	【20】
useMediaControls	音频和视频元素的响应式媒体控制	【21】
useMediaQuery	响应式 Media Query	【22】
useMemory	响应式 Memory Info	【23】
usePermission	响应式 Permissions API	【24】
usePreferredColorScheme	响应式 prefers-color-scheme 媒体查询	【25】
usePreferredDark	响应式 dark 优先主题	【26】
usePreferredLanguages	响应式 Navigator 语言	【27】
useScreenSafeArea	响应式 env(safe-area-inset-*)	【28】
useScriptTag	注入script标签	【29】
useShare	响应式 Web Share API	【30】
useTitle	响应式 document title	【31】
useUrlSearchParams	响应式 URLSearchParams	【32】
useWakeLock	当应用程序需要继续运行时，响应式屏幕唤醒锁定API提供了一种防止设备变暗或锁定屏幕的方法	【33】

组件

功能/链接	作用	用例
computedInject	结合 computed 和 inject	【34】
templateRef	绑定 ref 到模板元素的简写	【35】
tryOnBeforeUnmount	安全的 onBeforeUnmount	【36】
tryOnMounted	安全的 onMounted	【37】
tryOnScopeDispose	安全的 onScopeDispose	【38】
tryOnUnmounted	安全的 onUnmounted	【39】
unrefElement	DOM元素 unref	【40】
useMounted	ref 中的 mounted状态	【41】
useTemplateRefsList	将refs绑定到 v-for 内部的模板元素和组件的简写	【42】
useVirtualList	轻松创建虚拟列表	【43】
useVModel	v-model 绑定的简写	【44】
useVModels	props v-model 绑定的简写	【45】

格式器

功能/链接	作用	用例
useTimeAgo	响应式的 time ago

Misc

功能/链接	作用	用例
useEventSource	一个 EventSource 或 Server-Sent-Events 实例，打开到 HTTP 服务器的持久连接
useWebSocket	响应式 WebSocket 客户端
useWebWorker	简单的 Web Workers 注册和交流
useWebWorkerFn	不阻塞用户界面的前提下执行额外的函数

传感器

功能/链接	作用	用例
onClickOutside	监听元素外部的点击
onKeyStroke	监听键盘按键是否被敲击
onStartTyping	当用户开始在不可编辑的元素上键入时触发
useBattery	响应式电池状态 API
useDeviceMotion	响应式 DeviceMotionEvent
useDeviceOrientation	响应式 DeviceOrientationEvent
useDevicePixelRatio	响应式追踪 window.devicePixelRatio
useDevicesList	响应式 enumerateDevices 监听可用的输入输出设备
useDisplayMedia	响应式 mediaDevices.getDisplayMedia streaming
useDocumentVisibility	响应式地追踪 document.visibilityState
useDraggable	使元素可拖动★
useElementBounding	一个HTML元素的 响应式边框盒子
useElementByPoint	基于点的响应式的元素
useElementHover	响应式的 元素的 hover 状态
useElementSize	一个 HTML 元素 的 响应式的 尺寸
useElementVisibility	跟踪viewport中元素的可见性
useFocus	响应式的工具，用于追踪或者设置一个 DOM 元素的聚焦状态
useFocusWithin	响应式的工具，用于追踪一个元素或其后代是否有焦点
useFps	响应式的 FPS (帧每秒)
useGeolocation	响应式的 Geolocation（地理定位） API
useIdle	跟踪用户是否处于非活动状态
useIntersectionObserver	检测目标元素的可见性
useKeyModifier	响应式的 Modifier 状态
useMagicKeys	响应式的按键状态
useMouse	响应式的鼠标位置
useMouseInElement	响应式的相对于一个元素的鼠标位置
useMousePressed	响应式的鼠标按压状态
useMutationObserver	监听对DOM树所做的更改
useNavigatorLanguage	监听用户对 navigator 语言首选项的更改
useNetwork	响应式的网络状态
useOnline	响应式的在线状态
usePageLeave	响应式的状态以展示鼠标是否离开页面
useParallax	轻松创建视差效果
usePointer	响应式的 指针 状态
usePointerSwipe	基于 PointerEvents 的，响应式的 滑动（swipe）检测
useResizeObserver	报告元素内容或边框尺寸的变化
useScroll	响应式的 滚动位置和状态
useScrollLock	锁定元素的滚动
useSpeechRecognition	响应式的 SpeechRecognition（语音识别）
useSpeechSynthesis	响应式的 SpeechSynthesis（语音合成）
useSwipe	基于 TouchEvents 的，响应式的 滑动（swipe）检测
useTextSelection	响应式地追踪基于Window.getSelection的用户文本选择
useUserMedia	响应式的 mediaDevices.getUserMedia streaming
useWindowFocus	使用 window.onfocus 和 window.onblur 事件，响应式地追踪 window 焦点
useWindowScroll	响应式的 window 滚动
useWindowSize	响应式的 window 尺寸

状态

功能/链接	作用	用例
createGlobalState	将状态保持在全局范围内，以便跨Vue实例重用
createSharedComposable	使可组合的函数可用于多个Vue实例
useLocalStorage	响应式的 LocalStorage
useSessionStorage	响应式的 SessionStorage
useStorage	响应式的 LocalStorage/SessionStorage
useStorageAsync	异步支持的响应式 Storage

实用工具

功能/链接	作用	用例
and	refs 的 AND 条件
or	refs 的 OR 条件
not	refs 的 NOT 条件
asyncComputed	异步函数的computed
autoResetRef	一个当过一段事件后将被设置为默认值的 ref
biSyncRef	双向 refs 同步
controlledComputed	明确定义 computed 的深度
controlledRef	对ref及其响应性的精细控制
createEventHook	utility for creating event hooks
createReactiveFn	将简单函数转换为reactive函数
createUnrefFn	创建一个普通函数，接受 ref 和 原始值作为参数
debouncedRef	一个 ref 的 debounce（防抖） 更新
eagerComputed	eager computed 没有 惰性计算（lazy evaluation）
extendRef	为Ref添加额外属性
get	ref.value的简写
set	ref.value = x的简写
isDefined	非 nullish 检查 Ref 的守卫类型
makeDestructurable	使对象和数组同时 isomorphic destructurable
reactify	将简单函数转换为reactive函数
reactifyObject	应用 reactifyto 一个对象
reactivePick	reactively pick fields from a reactive object
refDefault	将默认值应用于refs
syncRef	保持目标refs与源refs同步
toReactive	将ref转换为reactive
toRefs	也接受对象refs的被扩展的toRefs
useAsyncQueue	顺序执行每个异步任务，并将当前任务结果传递给下一个任务
useAsyncState	响应式的异步状态
useBase64	响应式的 base64 转换
useClamp	响应式地将一个值夹在另外两个值之间
useConfirmDialog	创建事件钩子以支持 modals 和 confirmation 对话链
useCounter	具有实用功能的基本计数器
useCycleList	在项目列表中循环
useDebouncedRefHistory	shorthand for useRefHistorywith debounced filter
useEventBus	一个基本事件总线
useLastChanged	记录上次更改的时间戳
useManualRefHistory	当使用 using calls commit()时，手动跟踪 ref 的变更历史
useRefHistory	ref 的变更历史
useThrottledRefHistory	useRefHistorywith 去抖过滤器的简写
useDebounceFn	去抖执行一个函数
useDebounce	去抖执行一个ref值
throttledRef	节流更新一个ref
useThrottle	节流改变一个ref值
useThrottleFn	节流执行一个函数
useToggle	具有实用功能的布尔开关

Watch

功能/链接	作用	用例
debouncedWatch	防抖watch
throttledWatch	节流 watch
ignorableWatch	ignorable watch
pausableWatch	可暂停的watch
until	仅触发一次的 promised watch
watchAtMost	触发次数的 watch
watchOnce	仅触发一次的 watch
watchWithFilter	带有额外的 EventFilter 控制的 watch
whenever	watching 值 to be truthy的简写

---

第一组

【用例1】

【用例2】

【用例3】

【用例4】

【用例5】

【用例6】

【用例7】

【用例8】

第二组

【用例9】

【用例10】

【用例11】

【用例12】

【用例13】