“vueuse“ 中文索引与用例
2024-05-15 15:22:02
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】
“vueuse“ 中文索引与用例相关推荐
- 带中文索引的ListView 仿微信联系人列表
因为各种原因,项目经理和产品经理把我做的东西给否定了,所以决定分享出去. 主要功能: 1 .带中文索引的ListView 2.自己定义顶部搜索视图,能够对返回button,搜索button加入事件监听 ...
- mysql 5.6 全文索引_MySql5.6全文索引 及 5.7 中文索引插件ngram
MySql 5.6.4 之后开始支持 innodb 全文索引,之前版本只能使用MyISAM 直接开始: 创建一个表和索引 USE test; CREATE TABLE articles ( id IN ...
- Spring Boot 中文索引--资料大全
Spring Boot 中文索引 http://springboot.fun/ 贡献资源请 Pull 到此仓库 博客 纯洁的微笑-Spring Boot系列文章 林祥纤-从零开始学Spring Boo ...
- Lucene-4.8.1+paoding-analysis菜鸟试验：中文索引和查询
庖丁中文分词库是一个使用Java开发的,可结合到Lucene应用中的,为互联网.企业内部网使用的中文搜索引擎分词组件.Paoding填补了国内中文分词方面开源组件的空白,致力于此并希翼成为互联网网站首 ...
- 中文文本纠错 算例实现（有算例完整代码）
概述 文本纠错又称为拼写错误或者拼写检查,由于纯文本往往来源于手打或者OCR识别,很可能存在一些错误,因此此技术也是一大关键的文本预处理过程,一般存在两大纠错类型. 1拼写错误 第一种是Non-wor ...
- mysql索引 实验_“索引”实验小例
由索引引出简单实验几例 ***********************************************声明*************************************** ...
- php 函数索引 中文索引
PHP 函数索引 (共有 967 个函数) Abs: 取得绝对值. Acos: 取得反余弦值. ada_afetch: 取得数据库的返回列. ada_autocommit: 开关自动改动功能. ada ...
- oracle索引online样例,在线创建索引的问题案例
预计阅读时间:16分钟 <程序媛记一次在线创建索引被kill案例及应对措施>介绍的是,执行create index ... online的进程被kill,和相关可引起问题的场景,以及相应的 ...
- es修改索引java_Elasticsearch添加修改删除索引文档案例分享
本文介绍如何采用bboss es添加/修改/删除/批量删除elasticsearch索引文档,直接看代码. 添加/修改文档 TAgentInfo agentInfo = new TAgentInfo( ...
最新文章
- ValueError: output array is read-only
- oscache.properties文件配置
- Java学习之数据类型
- 在Windows Mobile和Wince(Windows Embedded CE)下进行Native C++开发，如何取出当前执行文件的路径和调用模块的路径...
- 001_JSON-lib下载和文档
- a different object with the same identifier val...
- NYOJ 275 队花的烦恼一
- Git 忽略一些文件的提交
- android id 重名_android - 解决“应用自定义权限重名”
- iOS:菜单控制器和菜单项：UIMenuController和UIMenuItem
- c语言中编译链接机制
- IIS7和IIS8环境下 ThinkPHP专用URL Rewrite伪静态规则
- maven项目中操作mysql数据库案例
- 内网服务器做了映射还是无法用公网访问,内网PC无法使用服务器NAT映射后的公网地址访问服务器的故障分析...
- 2020论文阅读：Few-Shot Object Detection with Attention-RPN and Multi-Relation Detector
- 一款批量修改AE模板的工具
- 设计模式-建造者模式（5）
- 2018 BACS Regional Programming Contest F. Football Free Kick(map离散化)
- VMware vCenter Server远程代码执行漏洞复现 CVE-2021-21972
- 乖乖小网安-网络安全之ARP初探