VueUse API目录

砂仁逐心
888 阅读17分钟

大家好，欢迎来到我的新文章！今天，我们将要探讨的主题是 VueUse - 这是一个收集了许多实用且可直接用于Vue.js项目的复合API函数/钩子的库。这些复合API可以极大地简化我们对功能或效果的实现，让代码更加简洁优雅，同时提高我们的开发效率。

在现代前端开发中，尤其是在Vue.js框架中，我们经常会遇到一些复杂的需求与操作，比如各种数学计算、动画效果的实现、与路由的交互、获取网页传参、AJAX请求处理等等。然而，这些操作往往需要写大量的代码，并且这些代码可能在多个地方可见，这就导致了我们的代码冗余，同时也增加了维护的难度。

这时候，VueUse就派上了用场。VueUse封装了大量的复合API，并以Vue.js的hook方式来使用，避免了代码的重复，提高可重用性，使代码更加整洁，简洁，可读性更强，使我们更专注于业务逻辑的处理。VueUse的使用范围包括但不限于数学操作、动画和运动、路由处理、RxJS处理、Schema.org、处理音频等。在本文中，我将详细介绍几个VueUse中的API，并演示如何在你的项目中使用它们来提高工作效率。

State

  • createGlobalState: 将状态保留在全局作用域中，以便跨Vue实例重用。
  • createInjectionState: 创建可以注入到组件中的全局状态。
  • createSharedComposable: 创建一个可在多个 Vue 组件中共享的响应式 Composable
  • injectLocal: 允许在当前组件及其所有子组件中注入一个本地响应式对象
  • provideLocal: 在当前组件上提供一个本地响应式对象
  • useAsyncState: 创建一个表示异步状态的引用，并管理其生命周期
  • useDebouncedRefHistory: 创建一个带有去抖的 Ref 历史
  • useLastChanged: 创建一个指向上一次更改了 Ref 的源头的 Ref
  • useLocalStorage: 创建一个持久化到 localStorage 的 Ref
  • useManualRefHistory: 创建一个手动操作记录历史的 Ref
  • useRefHistory: 创建一个跟踪其变化历史的 Ref
  • useSessionStorage: 创建一个持久化到 sessionStorage 的 Ref
  • useStorage: 创建一个持久化到 Web Storage（如localStorage或sessionStorage）的 Ref
  • useStorageAsync: 创建一个异步持久化到 Web Storage 的 Ref
  • useThrottledRefHistory: 创建一个节流的 Ref 历史记录

Elements

  • useActiveElement: 监听并返回当前活动元素。
  • useDocumentVisibility: 跟踪文档的可见性状态。
  • useElementBounding: 监听元素的边界信息。
  • useElementSize: 跟踪元素的尺寸。
  • useElementVisibility: 判断元素是否在视口内。
  • useMutationObserver: 用MutationObserver监听DOM变化。
  • useDraggable: 创建一个可拖拽的 HTML 元素
  • useDropZone: 创建一个可接收拖拽事件的区域
  • useIntersectionObserver: 使用 Intersection Observer API 监控元素的可见性
  • useMouseInElement: 跟踪鼠标在元素内的状态
  • useParentElement: 获取当前组件的父元素
  • useResizeObserver: 创建响应元素尺寸变化的 Observe
  • useWindowFocus: 跟踪窗口的焦点状态
  • useWindowScroll: 读取和监听窗口滚动的位置
  • useWindowSize: 获取窗口的大小

Browser

  • useBluetooth: 通过Web Bluetooth API与蓝牙设备互动
  • useBreakpoints: 监测屏幕尺寸和自定义断点
  • useBroadcastChannel: 使用BroadcastChannel API通信
  • useBrowserLocation: 跟踪和设置浏览器URL信息
  • useClipboard: 复制文本到剪贴板
  • useClipboardItems: 与剪贴板项目进行交互
  • useColorMode: 获取和设置颜色模式（浅色/深色）
  • useCssVar: 获取和设置CSS变量的值
  • useDark: 处理深色模式开关和监听
  • useEventListener: 添加DOM事件监听器
  • useEyeDropper: 使用EyeDropper API拾取颜色
  • useFavicon: 获取和设置网页图标（favicon）
  • useFileDialog: 打开文件选择对话框并读取选定文件
  • useFileSystemAccess: 通过FileSystem Access API读写文件
  • useFullscreen: 在全屏和非全屏之间切换
  • useGamepad: 监测游戏手柄的状态
  • useImage: 预览和解析图像文件
  • useMediaControls: 控制HTML5媒体元素（如音频/视频）
  • useMediaQuery: 监测媒体查询
  • useMemory: 获取设备内存状态
  • useObjectUrl: 管理对象URL
  • usePerformanceObserver: 监测性能事件
  • usePermission: 请求和监控Web API权限
  • usePreferredColorScheme: 获取用户的首选颜色方案
  • usePreferredContrast: 获取用户的首选对比度
  • usePreferredDark: 获取用户的首选深色模式
  • usePreferredLanguages: 获取用户的首选语言
  • usePreferredReducedMotion: 获取用户的首选减少运动
  • useScreenOrientation: 获取和监听屏幕方向
  • useScreenSafeArea: 获取设备的安全区域信息
  • useScriptTag: 动态加载和管理外部脚本
  • useShare: 使用Web Share API分享文本、链接和文件
  • useStyleTag: 动态加载和管理外部样式表
  • useTextareaAutosize: 自动调整元素的大小
  • useTextDirection: 获取和设置文本方向（LTR/RTL）
  • useTitle: 获取和设置HTML文档的标题
  • useUrlSearchParams: 管理URL查询参数
  • useVibrate: 控制设备震动
  • useWakeLock: 禁止设备进入睡眠状态
  • useWebNotification: 显示和管理Web通知
  • useWebWorker: 使用Web Worker进行异步处理
  • useWebWorkerFn: 将函数转移到Web Worker并在其中运行

Sensors

  • onClickOutside: 当点击元素外部时触发
  • onKeyStroke: 捕捉键盘敲击事件
  • onLongPress: 当元素被长时间按压时触发
  • onStartTyping: 当用户开始在可输入区域键入时触发
  • useBattery: 用于访问设备电池状态信息
  • useDeviceMotion: 获取设备的运动（指加速度和旋转率）数据
  • useDeviceOrientation: 获取设备的方位（指方向角）数据
  • useDevicePixelRatio: 检测屏幕分辨率的缩放比例
  • useDevicesList: 列出和监测连接的媒体输入设备
  • useDisplayMedia: 获取屏幕分享的流
  • useElementByPoint: 检测鼠标位置下的DOM元素
  • useElementHover: 监测某个元素是否有鼠标悬停
  • useFocus: 监测某个元素是否聚焦
  • useFocusWithin: 监测某个元素或其子元素是否聚焦
  • useFps: 计算和显示页面的当前帧率
  • useGeolocation: 获取和监控设备的地理位置信息
  • useIdle: 检测用户是否处于闲置状态
  • useInfiniteScroll: 无限滚动加载更多内容
  • useKeyModifier: 监测特定的键盘修饰键是否被激活
  • useMagicKeys: 提供一种用于访问所有键盘事件的方法
  • useMouse: 跟踪鼠标位置和状态
  • useMousePressed: 跟踪鼠标点击状态
  • useNavigatorLanguage: 获取浏览器语言设置
  • useNetwork: 获取和监听网络状态和变化
  • useOnline: 检测设备是否在线
  • usePageLeave: 检测鼠标何时离开页面
  • useParallax: 创建视差滚动效果
  • usePointer: 监测指针事件和状态
  • usePointerLock: 锁定指针以消除鼠标移动限制
  • usePointerSwipe: 检测指针滑动事件
  • useScroll: 跟踪元素的滚动位置
  • useScrollLock: 锁定或解锁页面的滚动
  • useSpeechRecognition: 使用Web语音识别进行实时语音输入
  • useSpeechSynthesis: 使用Web语音合成语音输出
  • useSwipe: 监测滑动手势
  • useTextSelection: 跟踪用户的文本选取
  • useUserMedia: 访问用户的摄像头和麦克风

Network

  • useEventSource: 结合使用Server-Sent Events (SSE) API，可以让用户订阅一个服务器的更新，服务器可以实时发送数据而无需断开连接。这种方法在处理实时数据流或是较大的数据集合时特别有用。
  • useFetch: 提供一种简洁且灵活的方法来获取网络资源，是实现HTTP请求的现代方法。它可以用于获取（获取）、发布（POST）、更新（更新）和删除（DELETE）网络资源。
  • useWebSocket: 这是一个全双工通信协议，它允许数据在用户和服务器之间双向传输。WebSockets特别适用于需要实时交互性的应用程序，如聊天应用程序、多人游戏，或者任何需要从服务器推送实时更新的应用。

Animation

  • useAnimate: 创建基于时间的动画，允许你控制动画进度以及应用自定义的插值函数
  • useInterval: 以固定的时间间隔重复执行一个回调函数
  • useIntervalFn: 与useInterval类似，但为定时器提供更强的控制，例如手动启动和停止定时器
  • useNow: 获取当前时间戳，并在时间变化时重新渲染
  • useRafFn: 在每个浏览器重绘之间使用请求动画帧（requestAnimationFrame）来持续调用回调函数
  • useTimeout: 设置一个只执行一次的延时回调函数
  • useTimeoutFn: 与useTimeout类似，但为定时器提供更强的控制，例如手动启动和停止定时器
  • useTimestamp: 获取一个相对高精度的当前时间戳
  • useTransition: 实现在两个值之间平滑过渡的动画

Component

  • computedInject: 这看起来像是结合了Vue的响应式计算属性(computed)和依赖注入(inject)的自定义钩子。
  • createReusableTemplate: 可能用于创建可重复使用的组件模板。
  • createTemplatePromise: 可能用于创建一个异步加载的组件模板。
  • templateRef: 可能用于引用组件中的模板元素。
  • tryOnBeforeMount: 可能是用于在组件挂载前尝试执行某些操作的生命周期钩子。
  • tryOnBeforeUnmount: 在组件卸载之前尝试运行某些功能。
  • tryOnMounted: 在组件挂载后尝试执行某些操作的生命周期钩子。
  • tryOnScopeDispose: 这可能是一个钩子，用于在某个范围（如一个响应式效果或计算属性的生命周期）结束时清理资源。
  • tryOnUnmounted: 在组件卸载后尝试执行某些操作的生命周期钩子。
  • unrefElement: 可能用于从Vue的ref对象中获取DOM元素，即使它可能没有被引用。
  • useCurrentElement: 可能是一个钩子，用于获取当前组件的根DOM元素。
  • useMounted: 一个钩子，用于执行一个函数一旦组件挂载到DOM。
  • useTemplateRefsList: 可能是一个用于跟踪一组模板引用的钩子。
  • useVirtualList: 可能用于实现虚拟列表，这是一种只渲染可视区域元素来优化性能的技术。
  • useVModel: 在Vue组件中用于创建一个v-model绑定。
  • useVModels: 这可能是一个用于创建多个v-model绑定的高级钩子。

Watch

  • until: 监听某个响应性数据源，直到它满足某个条件。
  • watchArray: 特别用于监视数组类型的响应性数据的变动。
  • watchAtMost: 设置一个最大的触发次数限制，监听器在触发达到这个次数后不再响应数据变动。
  • watchDebounced: 创建一个防抖版本的监听器，只有在特定延迟后无新的数据变动时才响应。
  • watchDeep: 深度监视一个响应性数据源，监听其内部深层次的变动。
  • watchIgnorable: 忽略某些特定的变动，只响应非忽略的变动。
  • watchImmediate: 在初始监听就执行回调函数，之后再当数据变动时执行。
  • watchOnce: 监视数据源，但只响应一次数据变动。响应后立刻取消监视。
  • watchPausable: 可以暂停和恢复的监听器。
  • watchThrottled: 创建一个节流版本的监听器，对于在特定时间内的连续变动，只响应一次。
  • watchTriggerable: 可以手动出发的监听器。
  • watchWithFilter: 通过提供一个筛选函数来选择性的响应数据变动。
  • whenever: 只要数据满足某个条件，就执行回调函数。

Reactivity

  • computedAsync: 创建一个异步计算属性。
  • computedEager: 具有立即计算效果的Computed Ref。
  • computedWithControl: 具有显式控制何时运行出发计算的Computed Ref。
  • extendRef: 继承 ref 和使用从父 ref 转变为计算属性用于子 ref的转换器。
  • reactify: 将 Vue 3 的反应性 API 添加到任何副本。
  • reactifyObject: 像 Vue 类型中对待的一样，对任何对象进行反应，并将其转换为具有相应的 Getter 的对象。
  • reactiveComputed: 创建一个基于响应式源的响应式计算属性。
  • reactiveOmit: 返回一个新的反应对象，对于指定的键,其值从原始对象中剥离。
  • reactivePick: 返回一个具有选择治疗对的新的反应性对象。
  • refAutoReset: 创建一个自动重置为初始值的 ref。
  • refDebounced: 创建一个防抖的 ref。
  • refDefault: 返回带有默认值的 ref。
  • refThrottled: 创建节流 ref。
  • refWithControl: 创建一个带有控制的 ref。
  • syncRef: 同步两个或更多的 Refs。
  • syncRefs: 保持多个 refs 同步。
  • toReactive: 创造代理的响应性视图的原始对象。
  • toRef: 创造代理的借鉴原生对象的属性。
  • toRefs: 为原生对象的所有属性创建代理的 refs。
  • toValue: 获取 ref 或响应性的值。

Array

  • useArrayDifference: 观察数组之间的差异，将一个数组中在另一个数组中出现的元素排除。
  • useArrayEvery: 检查数组中的所有元素是否满足某个条件，类似于原生 JavaScript 方法 Array.prototype.every。
  • useArrayFilter: 根据条件过滤数组元素并返回新数组，类似于 Array.prototype.filter。
  • useArrayFind: 寻找数组中符合条件的第一个元素，类似于 Array.prototype.find。
  • useArrayFindIndex: 查找数组中第一个符合条件的元素的索引，类似于 Array.prototype.findIndex。
  • useArrayFindLast: 查找数组中最后一个符合条件的元素。
  • useArrayIncludes: 检查数组中是否包含某个元素，类似于 Array.prototype.includes。
  • useArrayJoin: 将数组中的所有元素连接成一个字符串，类似于 Array.prototype.join。
  • useArrayMap: 根据提供的映射函数创建一个新数组，类似于 Array.prototype.map。
  • useArrayReduce: 将数组元素减少为单一值，类似于 Array.prototype.reduce。
  • useArraySome: 检查数组中是否有至少一个元素满足给定条件，类似于 Array.prototype.some。
  • useArrayUnique: 移除数组中的重复元素，返回包含唯一元素的新数组。
  • useSorted: 返回一个根据指定比较函数排序的数组的响应性引用。

Time

  • useDateFormat: 用于格式化日期和时间的自定义钩子。
  • useTimeAgo: 用于显示相对时间的自定义钩子（例如：2小时前、3天前等）。

Utilities

  • createEventHook: 创建一个自定义的事件钩子。
  • createUnrefFn: 创建一个可以处理 ref 和非 ref 值的函数。
  • get: 获取一个对象的嵌套属性的值。
  • isDefined: 检查一个值是否已定义。
  • makeDestructurable: 创建一个可解构的 ref 对象。
  • set: 设置一个对象的嵌套属性的值。
  • useAsyncQueue: 创建一个可以处理异步任务的队列。
  • useBase64: 提供编码到 Base64 格式和解码的实用函数。
  • useCached: 创建一个可缓存的函数。
  • useCloned: 创建一个克隆的 ref 对象。
  • useConfirmDialog: 用户确认对话框的实用函数。
  • useCounter: 提供一个计数器功能的自定义钩子。
  • useCycleList: 创建一个循环列表的钩子。
  • useDebounceFn: 创建一个防抖动函数。
  • useEventBus: 创建一个事件总线。
  • useMemoize: 创建一个记忆函数。
  • useOffsetPagination: 创建一个偏移分页功能的钩子。
  • usePrevious: 返回之前的状态或 props 的值。
  • useStepper: 创建一个步进函数。
  • useSupported: 检查特定 API 是否在当前环境中受支持。
  • useThrottleFn: 创建一个节流函数。
  • useTimeoutPoll: 创建一个定时轮询功能的钩子。
  • useToggle: 创建一个可切换的布尔值的钩子。
  • useToNumber: 创建一个将输入值转换为数字的函数。
  • useToString: 创建一个将输入值转换为字符串的函数。

@Electron (用于与 Electron 应用程序集成)

  • useIpcRenderer: 在Vue组件中使用Electron的ipcRenderer进行通信。
  • useIpcRendererInvoke: 使用ipcRenderer.invoke调用主进程中的方法并处理返回的Promise。
  • useIpcRendererOn: 使用ipcRenderer.on监听主进程发来的消息。
  • useZoomFactor: 控制web页的缩放因子。
  • useZoomLevel: 控制web页的缩放级别。

@Firebase (用于与 Firebase 服务集成)

  • useAuth: 监听和管理Firebase认证状态。
  • useFirestore: 使用Firestore数据库进行实时数据的读写。
  • useRTDB: 使用Firebase实时数据库进行数据的读写。

@Head (用来操作文档头信息)

  • createHead: 创建用于管理头信息（<head>）的实例。
  • useHead: 在Vue组件中管理文档头信息。

@Integrations (提供与外部服务或库的整合)

  • useAsyncValidator: 使用异步表单验证函数。
  • useAxios: 集成Axios，进行HTTP请求并自动处理响应数据。
  • useChangeCase: 对字符串进行大小写转换。
  • useCookies: 管理浏览器Cookies。
  • useDrauu: 集成Drauu, 一个SVG绘图库。
  • useFocusTrap: 创建一个聚焦陷阱，将焦点锁定在某个元素或区域内。
  • useFuse: 使用Fuse.js进行高级搜索。
  • useIDBKeyval: 使用 idb-keyval 进行简单的IndexedDB键值操作。
  • useJwt: 处理JSON Web Tokens。
  • useNProgress: 使用nprogress进行加载进度条的控制。
  • useQRCode: 生成QR码。
  • useSortable: 集成Sortable.js，创建可拖放排序的列表。

@Math (用于执行各种数学操作)

  • createGenericProjection: 创建一个通用投影，可用于任何类型的值。
  • createProjection: 创建一个投影，用于在两个数之间进行插值或投影。
  • logicAnd: 对两个或更多布尔值执行逻辑“与”操作。
  • logicNot: 对一个布尔值执行逻辑“非”操作。
  • logicOr: 对两个或更多布尔值执行逻辑“或”操作。
  • useAbs: 返回一个数字的绝对值。
  • useAverage: 返回一组数字的平均值。
  • useCeil: 返回一个数字的上限。
  • useClamp: 限定一个数字在指定的范围内。
  • useFloor: 返回一个数字的下限。
  • useMath: 安全地执行Math对象的方法。
  • useMax: 返回一组数字中的最大值。
  • useMin: 返回一组数字中的最小值。
  • usePrecision: 对一个数字按照指定的精度进行四舍五入。
  • useProjection: 使用已有的投影数据对数值进行投影或插值。
  • useRound: 对一个数字进行四舍五入。
  • useSum: 计算一组数字的和。
  • useTrunc: 对一个数字进行截断操作。

@Motion (用于动画和运动效果)

  • useElementStyle: 用于动态地控制和更新DOM元素的样式。
  • useElementTransform: 用于动态地控制和更新DOM元素的变形（Transform）属性。
  • useMotion: 创建一个动画元素，并控制其所有变换和变换过渡属性。
  • useMotionProperties: 让你可以琢磨和更改动画参数。
  • useMotionVariants: 自定义动画状态，并在这些状态之间进行切换。
  • useSpring: 创建和控制弹簧动画。

@Router (用于与 Vue Router 集成)

  • useRouteHash: 监听和更改URL的哈希值。
  • useRouteParams: 获取和监听URL的参数值。
  • useRouteQuery: 获取和监听URL的查询参数。

@RxJS

  • from: 将Vue响应性引用转换为RxJS Observable。
  • toObserver: 将Vue响应性引用转换为RxJS Observer。
  • useExtractedObservable: 用于提取并使用Observable的值。
  • useObservable: 根据提供的Observable创建一个新的Vue响应性引用。
  • useSubject: 创建RxJS Subject并将其转换为Vue响应性引用。
  • useSubscription: 创建与Observable的订阅并在组件销毁时取消订阅。
  • watchExtractedObservable: 监视Observable并从它们提取值。

@SchemaOrg

  • createSchemaOrg: 创建Schema.org JSON-LD生成函数。
  • useSchemaOrg: 使用给定的Schema.org类型和属性在组件中创建JSON-LD标记。

@Sound

  • useSound: 创建和控制HTML5 音频的播放。

在本文中，我们展示并深入了解了VueUse库中的一些常用函数和钩子，希望通过本文的阅读，你能够掌握这些强大的工具，以便更有效地构建你的Vue.js应用。

VueUse的世界远不止这些，我们只是触及了冰山一角。VueUse还提供了许多其他高级的、特殊用途的函数和钩子，例如State、Utilities、Browser、Date、i18n等等。我强烈建议你像我一样，研究并实践这些API，实际用它们去构建项目。我确信，你一定会深深地爱上VueUse的。

记住，最好的学习方式永远是实践。所以，不要只是读这篇文章，然后忘记它。让我们一起动手实践，与VueUse共同进步，提升我们的开发效率，让我们的代码更加精炼强大。

感谢您抽出宝贵的时间阅读这篇文章。希望这篇文章对你的学习和工作有所帮助。如果你有任何疑问、想法或者想分享你的经验，欢迎在下方的评论中告诉我。期待我们在编程的世界里再次相遇。

最后，如果你觉得这篇文章有帮助，别忘了点赞、分享和关注，这会给我更多的动力来创造更多地优质内容。再次感谢，并祝你的编程之路顺利！

avatar
文章
阅读
粉丝