前端【免费下载链接】vueuseCollection of essential Vue Composition Utilities for Vue 3项目地址https://gitcode.com/gh_mirrors/vu/vueuse点击查看免费下载vueuse/integrations是 VueUse 生态中面向第三方工具库的「适配层」附加包将async-validator、axios、focus-trap、fuse.js、sortablejs等 12 个流行库逐一封装为符合 Vue 3 组合式 API 习惯的 hook。阅读本文你将掌握如何安装并最小化引入该包、每个集成函数的能力边界与核心选项、以及它们在 packages/integrations 源码中的真实实现原理从而在自己的 Vue 3 项目中把这些功能用对、用好。一、vueuse/integrations的定位VueUse 生态的「第三方库适配层」VueUse 本身由多个独立发布的子包构成其中vueuse/core提供浏览器与状态类组合式函数vueuse/shared提供跨端共享的基础工具。而 packages/integrations/README.md 开篇即说明其定位This is an add-on of VueUse, providing integration wrappers for utility libraries.即它是 VueUse 的附加包add-on专门解决一个现实问题生态中存在大量优秀的第三方工具库但它们大多只暴露命令式、过程式的 API难以直接融入 Vue 的响应式体系。vueuse/integrations所做的就是把它们包装成「响应式、可组合、可在组件作用域内自动清理」的 hook。从 packages/integrations/package.json 可以看到几个关键事实包名vueuse/integrations当前版本15.0.0声明type: module且sideEffects: false有利于打包器做树摇优化它的直接依赖只有vueuse/core与vueuse/shared均为 workspace 内部包所有第三方库都被列为peerDependencies并标记为optional: true——也就是说集成包本体不强制安装任何第三方库你用到哪个功能就装哪个库engines.node 22构建工具使用tsdown见 tsdown.config.ts。集成包共提供 12 个函数入口统一从 packages/integrations/index.ts 导出函数封装的第三方库主要能力useAsyncValidatorasync-validator响应式表单校验useAxiosaxios响应式 HTTP 请求useChangeCasechange-case响应式字符串命名格式转换useCookiesuniversal-cookie响应式 Cookie 读写与监听useDrauudrauu响应式 SVG 绘图画板useFocusTrapfocus-trap响应式焦点陷阱useFusefuse.js组合式模糊搜索useIDBKeyvalidb-keyval响应式 IndexedDB 存储useJwtjwt-decode响应式 JWT 解码useNProgressnprogress响应式顶部进度条useQRCodeqrcode响应式二维码生成useSortablesortablejs响应式拖拽排序每个函数都有独立的实现目录与文档如 useAxios/index.md、useSortable/index.md源码即其最佳说明书。二、安装集成包 按需的第三方库官方 README 给出的安装命令只有一个npm i vueuse/integrations但正如上文所述所有第三方库都是可选的 peerDependencies因此实际使用某个功能时需要额外安装对应的库。例如用到useAxios时要同时安装npm i vueuse/integrations axios从 packages/integrations/package.json 的peerDependencies可以查到当前仓库所要求的各库版本范围安装时直接采用这些主版本即可保持兼容async-validator^4axios^1change-case^5drauu^1 或 ^0.4focus-trap^7 或 ^8fuse.js^7idb-keyval^6jwt-decode^4nprogress^0.2qrcode^1.5sortablejs^1universal-cookie^7 或 ^8同时peerDependencies中要求vue ^3.5.0使用前请确认项目中的 Vue 版本满足要求。三、Tree-shaking始终从子模块导入vueuse/integrations的sideEffects为false理论上打包器可以对未用到的导出做摇树。但 README 仍给出了一个更彻底的优化建议——从子模块路径直接导入而不是从包根路径导入// Dont import { useAxios } from vueuse/integrations // Do import { useAxios } from vueuse/integrations/useAxios这一建议与 packages/integrations/package.json 中的exports字段完全对应包不仅声明了.根入口和./*通配入口还为每一个函数显式列出了独立入口如./useAxios: ./dist/useAxios.js说明构建产物本身就是按函数拆分的子路径导入可以得到最小的加载体积。四、12 个集成函数逐一详解4.1useAxios响应式 HTTP 请求useAxios是集成包中使用频率最高的函数之一它把 axios 的请求过程映射为一组响应式状态。从 useAxios/index.ts 的返回值接口可以看到它提供的状态与方法状态responseAxiosResponse、data响应数据、isFinished、isLoading、isAbortedisCanceled为其别名、error方法abort(message?)/cancel(message?)中止请求execute(url?, config?)手动发起请求。其函数签名支持多种调用形态官方 README 中并未详列但源码的类型重载非常清晰// 传入 url 与请求配置立即发起请求 useAxios(/api/users, { method: GET }) // 传入 url 与自定义 axios 实例 useAxios(/api/users, customInstance) // 仅传配置不传 url——此时 immediate 为 false需要手动 execute const { execute } useAxios({ url: /api/users })关键实现细节见 useAxios/index.ts默认选项immediate在有 url 时默认为true传 url 即自动请求shallow默认为true状态用 shallowRef 保持轻量abortPrevious默认为true新请求自动中止上一个未完成请求避免竞态axios 实例识别源码注释指出由于 axios 的 issue #737不能用instanceof判断实例而是通过!!val?.request探测对象是否带有request方法Promise-like 设计返回值同时实现了then/catch内部用vueuse/shared的until(isFinished).toBe(true)等待请求结束因此可以直接await useAxios(...)错误处理未传 url 时设置AxiosError.ERR_INVALID_URL错误onSuccess、onError、onFinish回调分别在成功、失败、结束时触发resetOnExecute可在每次执行前把data重置为initialData。一个带初始数据与手动控制的完整示例import { useAxios } from vueuse/integrations/useAxios const { data, error, isFinished, execute } useAxios( /api/users, {}, { initialData: [], onError: e console.error(e) }, ) // 手动重新请求 execute(/api/users?page2)4.2useAsyncValidator响应式表单校验useAsyncValidator封装async-validatorElement Plus 等组件库的表单校验底层库让校验规则与校验结果都成为响应式数据。见 useAsyncValidator/index.ts。其参数为value被校验的表单值对象MaybeRefOrGetter即可以是 ref 或 getterrules校验规则同样支持响应式传入optionsvalidateOption透传给 async-validator 的校验选项、immediate默认true首次即触发校验、manual设为true后不再自动校验只通过execute()手动触发。返回值包含pass是否通过、isFinished、errors错误数组、errorInfo完整错误对象、errorFields按字段分组的错误以及execute()方法。源码中的核心行为见 useAsyncValidator/index.ts校验器通过computed(() new AsyncValidatorSchema(toValue(rules)))创建规则变化会自动重建校验器非manual模式下用watch([valueRef, validator], () execute(), { immediate, deep: true })深度监听值变化自动校验返回值同样实现了then可用await useAsyncValidator(...)等待首次校验完成后再取结果。import { useAsyncValidator } from vueuse/integrations/useAsyncValidator import { ref } from vue const form ref({ name: }) const { pass, errors, execute } useAsyncValidator(form, { name: [{ required: true, message: 姓名不能为空 }], })4.3useChangeCase响应式字符串命名格式转换useChangeCase是change-case的响应式封装。它有一个非常巧妙的实现通过类型工具FilterKeys自动筛出change-case模块中所有以Case结尾的导出函数如camelCase、kebabCase、snakeCase、pascalCase、titleCase等并在运行时同样做「以 Case 结尾」的过滤收集见 useChangeCase/index.ts因此新增的转换函数无需改封装代码即可被支持。用法上当input是 ref 时返回可写的WritableComputedRef赋值value会写回源 ref当input是 getter 函数时返回只读的ComputedRef。若传入不存在的转换类型源码会抛出Invalid change case type ${t}错误。import { useChangeCase } from vueuse/integrations/useChangeCase const name ref(helloWorld) const kebab useChangeCase(name, kebabCase) // hello-world // 传入 getter只读计算 const upper useChangeCase(() name.value, upperCase)4.4useCookies响应式 Cookie 读写useCookies封装universal-cookie并把 Cookie 的变化转成响应式更新。它同时导出了一个SSR 专用工厂函数createCookies(req)——服务端渲染时把请求的req.headers.cookie传入创建 cookie 实例避免在 Node 环境下读取window.document.cookie报错见 useCookies/index.ts。主要参数dependencies要监听的 cookie 名称数组传空数组表示不监听任何变化传null则任何变化都会触发options.doNotParse默认false即读取时会尝试把值当作 JSON 解析设为true则原样返回字符串options.autoUpdateDependencies默认false开启后调用get(name)会自动把该 name 加入监听列表。返回值get、getAll是响应式的内部通过touchesshallowRef 计数触发依赖更新set、remove、addChangeListener、removeChangeListener直接透传 universal-cookie 的能力。shouldUpdate辅助函数见 useCookies/index.ts逐个对比依赖项在新旧 cookie 中是否变化决定是否触发更新。import { createCookies, useCookies } from vueuse/integrations/useCookies // 客户端直接使用 const cookies useCookies([token]) const token cookies.get(token) cookies.set(token, abc, { path: / }) // SSR先用请求头创建 const cookiesWithReq createCookies(req)([token])4.5useDrauu响应式 SVG 绘图画板useDrauu把 drauu 绘图引擎封装成可组合的响应式画板。它接收一个 SVG 目标元素MaybeComputedElementRef在元素挂载后自动创建Drauu实例见 useDrauu/index.ts。返回值丰富drauuInstance底层实例、load(svg)加载、dump()导出 SVG 字符串、clear()、cancel()、undo()/redo()附带canUndo/canRedo状态以及可响应式配置的brush。brush的默认值见 useDrauu/index.ts为{ color: black, size: 3, mode: draw, fill: transparent, cornerRadius: 0, ... }深度监听brush变化会同步到实例。事件方面通过createEventHook暴露onChanged、onCommitted、onStart、onEnd、onCanceled五个事件钩子。import { useDrauu } from vueuse/integrations/useDrauu const target refSVGSVGElement() const { brush, undo, redo, canUndo, canRedo, onChanged } useDrauu(target, { brush: { color: #f00, size: 6, mode: stylus }, }) onChanged(() console.log(画板内容已变化))4.6useFocusTrap响应式焦点陷阱useFocusTrap封装focus-trap用于模态框、侧边栏等需要把键盘焦点限制在容器内的场景。它接受一个目标元素或元素数组支持字符串选择器、ref、getteroptions在透传 focus-trap 配置的基础上增加了immediate选项立即激活陷阱。源码实现见 useFocusTrap/index.ts有几个值得注意的点通过watch(targets, ..., { flush: post })在 DOM 更新后解析目标元素元素存在时才惰性创建createFocusTrap(...)若陷阱已存在而目标元素变化会调用updateContainerElements更新容器并保持激活状态immediate: true时创建即activate()组件卸载时通过tryOnScopeDispose(() deactivate())自动清理避免焦点被永久锁死。import { useFocusTrap } from vueuse/integrations/useFocusTrap const dialogRef refHTMLElement() const { hasFocus, activate, deactivate, pause, unpause } useFocusTrap(dialogRef, { immediate: false, }) function open() { dialogRef.value!.style.display block; activate() } function close() { deactivate(); dialogRef.value!.style.display none }4.7useFuse组合式模糊搜索useFuse封装 Fuse.js 模糊搜索引擎。核心思路是让 Fuse 实例、搜索词、数据集三者都保持响应式搜索结果自动重算见 useFuse/index.ts。参数与选项search搜索词MaybeRefOrGetterstringdata数据集options.fuseOptions透传给new Fuse()的索引与匹配配置如keys、thresholdoptions.resultLimit结果数量上限options.matchAllWhenSearchEmpty默认false设为true后搜索词为空时返回全部数据便于实现「空搜索显示完整列表」的常见交互。返回值fuse是底层实例的 Ref可在特殊场景直接调用其 APIresults是FuseResult[]的计算属性。源码对数据与配置分别做了监听数据变化调用setCollection增量更新索引fuseOptions变化则重建 Fuse 实例。import { useFuse } from vueuse/integrations/useFuse const search ref() const list ref([{ title: Vue }, { title: VueUse }]) const { results } useFuse(search, list, { fuseOptions: { keys: [title], threshold: 0.3 }, matchAllWhenSearchEmpty: true, })4.8useIDBKeyval响应式 IndexedDB 存储useIDBKeyval把idb-keyval的异步存储封装成类似useLocalStorage的体验一个响应式dataref写入即持久化到 IndexedDB见 useIDBKeyval/index.ts。选项说明deep默认true深度监听 data 变化触发写入shallow默认false使用 shallowRefwriteDefaults默认truekey 不存在时把初始值写入存储listenToStorageChanges默认true通过BroadcastChannel监听其他标签页的写入实现多标签页同步channel 名为vueuse-idb-${JSON.stringify(key)}serializer自定义序列化器{ read, write }默认原样读写onError默认console.error。返回值data可删除的响应式引用、isFinished初次读取完成标志、isSupported环境支持判断基于BroadcastChannel探测、set(value)显式写入并立即持久化。源码中写入采用update(key, () serializedValue)避免读改写竞态set方法会先暂停监听再写入再恢复防止循环触发。import { useIDBKeyval } from vueuse/integrations/useIDBKeyval const { data: draft, isFinished, set } useIDBKeyval(draft, { title: , body: }) // data 的任何变更都会自动写入 IndexedDB watch(draft, v console.log(草稿已保存, v))4.9useJwt响应式 JWT 解码useJwt封装jwt-decode把 token 字符串映射为响应式的header与payload见 useJwt/index.ts。它接收一个MaybeRefOrGetterstring的 encoded JWTtoken 变化时解码结果自动更新。选项fallbackValue解码失败时的兜底值默认null、onError解码异常回调。源码将jwtDecode(encodedJwt, { header: true })与jwtDecode(encodedJwt)分别包在try/catch中任何解码错误都会被捕获并返回兜底值而不会让异常打断渲染。import { useJwt } from vueuse/integrations/useJwt const token ref(localStorage.getItem(token) ?? ) const { header, payload } useJwt(token, { fallbackValue: {} }) // payload.exp、payload.sub 等字段均为响应式计算值4.10useNProgress响应式顶部进度条useNProgress把 nprogress 封装成响应式状态机见 useNProgress/index.ts。返回值包括isLoading可写计算属性设为true时调用nprogress.start()设为false时调用nprogress.done()读取时根据当前进度是否小于 1 判断加载中progress当前进度值 refstart()/done(force?)直接控制进度条remove()移除进度条并重置状态。实现上源码覆盖了 nprogress 的set方法把nprogress.set(n)的调用同步回写progress.value再通过watchEffect把外部对progress.value的修改同步给进度条形成双向同步组件卸载时tryOnScopeDispose(nprogress.remove)自动清理。import { useNProgress } from vueuse/integrations/useNProgress import { useFetch } from vueuse/core const { isLoading, start, done } useNProgress() async function load() { start() try { await fetchData() } finally { done() } }4.11useQRCode响应式二维码生成useQRCode是qrcode的最小封装输入文本MaybeRefOrGetterstring输出二维码的Data URL 字符串shallowRef。完整实现仅 30 行见 useQRCode/index.ts用watch(src, async value { result.value await QRCode.toDataURL(value, options) }, { immediate: true })监听文本变化并调用toDataURL同时用isClient守卫避免在服务端执行。import { useQRCode } from vueuse/integrations/useQRCode const text ref(https://vueuse.org) const qrDataUrl useQRCode(text, { width: 256, margin: 1 }) // img :srcqrDataUrl altQR Code4.12useSortable响应式拖拽排序useSortable封装 SortableJS并做了一个关键增强拖拽结束时自动同步数组顺序。源码在默认选项中注册onUpdate回调调用moveArrayElement把被拖动的元素从oldIndex移到newIndex见 useSortable/index.ts并配套导出insertNodeAt、removeNode、moveArrayElement等 DOM 操作工具函数。签名支持两种目标形式CSS 选择器字符串或元素 ref/getter。返回start()、stop()、option(name, value?)读取/设置 Sortable 配置。选项在透传 SortableJS 全部Options之外增加了watchElement默认false开启后监听目标元素变化如v-if条件渲染并自动重建 Sortable关闭默认则只在挂载时初始化一次元素变化需手动start()。默认行为是tryOnMounted(start)延迟到挂载后初始化组件卸载时自动destroy()清理。拖拽后数组同步还通过nextTick与浅拷贝避免在移动过程中反复触发副作用。import { useSortable } from vueuse/integrations/useSortable const list ref([A, B, C]) const el refHTMLElement() const { start, stop, option } useSortable(el, list, { animation: 150, watchElement: true, })五、License 与使用约定vueuse/integrations与 VueUse 其他子包一致采用 MIT License版权归属 Anthony Fu2019 至今。使用集成包时请记住两条核心约定按需安装第三方库均为可选 peerDependencies用到哪个函数就额外安装哪个库避免体积膨胀子路径导入从vueuse/integrations/useXxx导入以获得最佳 tree-shaking 效果这与包内exports按函数拆分的构建产物一一对应。总体来看vueuse/integrations的价值不在于「造轮子」而在于把成熟的第三方库以统一、响应式、自动清理生命周期的方式接入 Vue 3 组合式 API。读懂这 12 个封装背后的状态映射、监听策略与清理逻辑你就能在真实项目中熟练组合它们甚至以此为范式封装自己项目里的其他工具库。赞分享前端【免费下载链接】vueuseCollection of essential Vue Composition Utilities for Vue 3项目地址https://gitcode.com/gh_mirrors/vu/vueuse点击查看免费下载相关推荐VueUse 入门与实战指南Vue 3 组合式工具库的安装、核心用法与架构解析VueUse 入门与实战指南Vue 3 组合式工具库的安装、核心用法与架构解析 VueUse 是一套面向 Vue 3 的「组合式工具函数」合集覆盖浏览器 A前端CAVA依赖库集成FFTW、SDL等第三方库的封装CAVA依赖库集成FFTW、SDL等第三方库的封装 音频可视化的核心技术架构 CAVACross platform Audio Visualizer作为跨音视频桌面应用cuda-samples 实战使用 cuda.core.systemNVML编写 CUDA 系统信息查询工具cuda samples 实战使用 cuda.core.systemNVML编写 CUDA 系统信息查询工具 本篇文章基于 NVIDIA cuda sam前端上一篇GraphPFN-1.3安全指南模型部署与数据隐私保护最佳实践下一篇5大实用功能解锁网易云音乐全新体验云盘快传、无损下载与智能管理创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考