“vueuse“ 中文索引与用例
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的简写 |
第一组
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
5
0- 0
已为社区贡献1条内容
所有评论(0)