VueUse 核心工具库指南：Vue组合式API必备函数集合与版本更新

vueuse-core-skilld by harlan-zw/vue-ecosystem-skills

93 周安装量

151 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/harlan-zw/vue-ecosystem-skills --skill vueuse-core-skilld

Vue JavaScript 框架前端架构

🇨🇳中文介绍

vueuse/vueuse `@vueuse/core`

必备的 Vue 组合式工具集合

版本： 14.2.1 依赖： @types/web-bluetooth@^0.0.21, @vueuse/metadata@14.2.1, @vueuse/shared@14.2.1 标签： vue2: 2.0.35, vue3: 3.0.35, demi: 4.0.0-alpha.0, alpha: 14.0.0-alpha.3, beta: 14.0.0-beta.1, latest: 14.2.1

参考： 文档 — API 参考、指南 • GitHub Issues — 错误、变通方案、边界情况 • GitHub Discussions — 问答、模式、配方 • 发布记录 — 更新日志、破坏性变更、新 API

API 变更

本节记录特定版本的 API 变更 — 请优先关注近期的主要/次要版本发布。

破坏性变更： computedAsync — 在 v14.0.0 中，默认的 flush 从更改为；依赖延迟求值的代码现在默认会同步运行

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

相关 Skills

Node.js后端模式指南：构建可扩展REST API、微服务与实时应用

18,600 周安装

Next.js 16+ 缓存组件指南：实现部分预渲染（PPR）与混合内容缓存

16,000 周安装

网页可访问性（A11y）开发指南：实现WCAG合规、键盘导航与屏幕阅读器支持

12,600 周安装

Vue 3 调试指南：解决响应式、计算属性与监听器常见错误

11,800 周安装

破坏性变更： useThrottleFn — 在 v14.0.0 中与传统的节流行为对齐（尾部调用行为已更改）；之前默认在头部和尾部都调用，请验证选项是否符合预期行为来源

破坏性变更： createSharedComposable — 在客户端，v14.0.0 中现在只返回共享的组合式函数（单个值），而不是元组/对象来源

破坏性变更： useAsyncState — 在 v13.7.0 中，globalThis.reportError 现在是默认的 onError 处理程序；之前如果未提供处理程序，错误会被静默吞掉来源

破坏性变更： 在 v13.0.0 中移除了 CJS 构建 — @vueuse/core 现在仅支持 ESM；require('@vueuse/core') 不再有效来源

破坏性变更： 自 v14.0.0 起，Vue 3.5 现在是最低要求的对等依赖项来源

已弃用： watchPausable — 将在未来版本中移除；Vue 3.5 原生的 watch() 现在直接返回 { stop, pause, resume }；请改用 const { pause, resume } = watch(src, cb) 来源

已弃用： computedEager — 将在未来版本中移除；Vue 3.4+ 的 computed() 在值未更改时不再触发依赖项，使得此函数变得不必要来源

已弃用： templateRef(key) — 在 v13.6.0 中已弃用；请改用 Vue 内置的 useTemplateRef() 来源

已弃用： executeTransition() — 请改用新的 transition() 函数；UseTransitionOptions.transition 选项也已弃用，请使用 easing 来源

已弃用： breakpointsVuetify — 是 breakpointsVuetifyV2 的别名；现已弃用，请明确使用 breakpointsVuetifyV2 或 breakpointsVuetifyV3 来源

已弃用： asyncComputed — computedAsync 的别名，已从 v14 的别名导出中移除；请以 computedAsync 导入来源

新增： refManualReset(defaultValue) — 在 v14.0.0 中添加；创建一个带有 .reset() 方法的 ref，该方法可恢复初始值来源

新增： useCssSupports(property, value) / useCssSupports(conditionText) — 在 v14.2.0 中添加；CSS.supports() 的响应式包装器来源

新增： useTimeAgoIntl(time, options) — 在 v13.7.0 中添加；基于 Intl 的时间间隔格式化，使用 Intl.RelativeTimeFormat，支持自定义单位来源

新增： transition(source, from, to, options) — 在 v14.0.0 中作为 executeTransition 的非弃用替代品添加；还添加了 interpolation 选项用于自定义插值函数来源

新增： ConfigurableScheduler 接口 + scheduler 选项 — 在 v14.2.0 中添加到基于时间的组合式函数（useCountdown、useNow、useTimestamp、useTimeAgo、useTimeAgoIntl、useElementByPoint、useMemory、useVibrate）；取代了已弃用的每个组合式函数独立的 interval/immediate 选项来源

新增： useIdle — 现在实现了 Stoppable 接口 (v14.0.0)，除了之前的返回值外，还返回 { pause, resume, stop } 来源

其他变更： useIntersectionObserver 的 rootMargin 现在变为响应式 (v14.2.0) · useElementVisibility 增加了 initialValue 选项 (v14.1.0) 并继承了响应式的 rootMargin (v14.2.0) · useDropZone 增加了 checkValidity 函数 (v14.1.0) · useRefHistory 增加了 shouldCommit 选项 (v13.4.0) · useUrlSearchParams 增加了 stringify 选项 (v13.4.0) · watchAtMost 现在返回 { pause, resume } (v14.0.0) · useStorageAsync 增加了 onReady 选项和 Promise 返回值 (v13.6.0) · useAsyncState 的初始值现在可以是 ref (v14.0.0) · useSortable 增加了 watchElement 选项 (v14.2.0) · useWebSocket 的 autoConnect.delay 接受一个函数 (v14.1.0) · useClipboardItems 暴露了 read() 方法 (v13.7.0) · useDraggable 增加了容器限制拖拽时的自动滚动功能 (v14.2.0) · useEventSource 增加了 serializer 选项 (v13.8.0) · onLongPress 的 delay 现在可以是一个函数 (v14.0.0) · onClickOutside 的 target 现在可以是一个 getter 函数 (v14.0.0)

尽可能传递响应式 getter（() => value）作为参数，而不是普通的 ref — VueUse 9+ 支持 getter 参数，无需中间 computed 即可启用派生的响应式值（例如 useTitle(() => isDark.value ? 'Night' : 'Day')）来源
将 useFetch 调用包装在 createFetch 中以实现应用范围的配置 — 设置一次基础 URL、认证头和 CORS 模式；各个调用点无需重新指定选项即可继承它来源
使用带有 throttleFilter / debounceFilter 的 eventFilter 选项，而不是手动包装回调 — 在组合式函数级别为 useLocalStorage、useMouse 和其他事件驱动的组合式函数应用速率限制来源
在 useStorage 上启用 mergeDefaults: true（或传递自定义合并函数），以便在演进存储的对象模式时使用 — 如果没有它，现有存储数据中不存在的新默认键将是 undefined 来源
当 useStorage 的默认值为 null 时，使用 @vueuse/core 中的 StorageSerializers — 如果没有序列化器提示，类型无法推断，序列化将回退到原始字符串来源
使用 createSharedComposable 在组件之间共享单个组合式函数实例 — 避免重复的事件监听器和状态。注意：在 SSR 中，它会自动回退到每次调用一个非共享实例，以防止跨请求污染来源
当计算值应仅在特定源上更新，而不是其所有响应式依赖项时，使用 computedWithControl — computed 无法选择退出自动依赖项跟踪，但 computedWithControl 将监视源与 getter 解耦来源
在组件作用域外包装 VueUse 调用时使用 effectScope()，并调用 scope.stop() 进行清理 — 并非所有组合式函数都返回停止句柄；当组合式函数在存储或非组件上下文中使用时，effectScope 是通用的逃生舱口来源
将 window 选项传递给浏览器组合式函数，如 useMouse 或 useScroll，以定位 iframe 或在测试中模拟全局对象 — 所有浏览器 API 组合式函数都通过选项接受可配置的全局依赖项来源
将自定义 scheduler 传递给基于时间的组合式函数（useNow、useCountdown 等），使其与 useRafFn 对齐或限制其更新速率 — 在 v14.1.0 / v14.2.0 中引入；没有它，基于时间的组合式函数将在其自己的内部间隔上运行，独立于动画帧来源

🇺🇸English

vueuse/vueuse `@vueuse/core`

Collection of essential Vue Composition Utilities

Version: 14.2.1 Deps: @types/web-bluetooth@^0.0.21, @vueuse/metadata@14.2.1, @vueuse/shared@14.2.1 Tags: vue2: 2.0.35, vue3: 3.0.35, demi: 4.0.0-alpha.0, alpha: 14.0.0-alpha.3, beta: 14.0.0-beta.1, latest: 14.2.1

References: Docs — API reference, guides • GitHub Issues — bugs, workarounds, edge cases • GitHub Discussions — Q&A, patterns, recipes • Releases — changelog, breaking changes, new APIs

API Changes

This section documents version-specific API changes — prioritize recent major/minor releases.

BREAKING: computedAsync — default flush changed from pre to sync in v14.0.0; code relying on deferred evaluation now runs synchronously by default source
BREAKING: useThrottleFn — aligned with traditional throttle behavior in v14.0.0 (trailing call behavior changed); previously called on both leading and trailing by default, verify options match expected behavior source
BREAKING: createSharedComposable — on client side, now returns only the shared composable (single value) instead of a tuple/object in v14.0.0 source
BREAKING: useAsyncState — in v13.7.0, globalThis.reportError is now the default onError handler; previously errors were silently swallowed if no handler was provided source
BREAKING: CJS build dropped in v13.0.0 — @vueuse/core is now ESM-only; require('@vueuse/core') no longer works source
BREAKING: Vue 3.5 is now required as a minimum peer dependency since v14.0.0 source
DEPRECATED: watchPausable — will be removed in a future version; Vue 3.5 native watch() now returns { stop, pause, resume } directly; use const { pause, resume } = watch(src, cb) instead source
DEPRECATED: computedEager — will be removed in a future version; Vue 3.4+ computed() no longer triggers dependents when the value does not change, making this unnecessary source
DEPRECATED: templateRef(key) — deprecated in v13.6.0; use Vue's built-in useTemplateRef() instead source
DEPRECATED: executeTransition() — use the new transition() function instead; UseTransitionOptions.transition option also deprecated, use easing source
DEPRECATED: breakpointsVuetify — was an alias for breakpointsVuetifyV2; now deprecated, explicitly use breakpointsVuetifyV2 or breakpointsVuetifyV3 source
DEPRECATED: asyncComputed — alias for computedAsync, removed from v14 alias exports; import as computedAsync source
NEW: refManualReset(defaultValue) — added in v14.0.0; creates a ref with a .reset() method that restores the initial value source
NEW: useCssSupports(property, value) / useCssSupports(conditionText) — added in v14.2.0; reactive wrapper for CSS.supports() source
NEW: useTimeAgoIntl(time, options) — added in v13.7.0; Intl-based time-ago formatting using Intl.RelativeTimeFormat, supports custom units source
NEW: transition(source, from, to, options) — added in v14.0.0 as the non-deprecated replacement for executeTransition; also adds interpolation option for custom interpolator functions source
NEW: ConfigurableScheduler interface + scheduler option — added in v14.2.0 to timed composables (useCountdown, useNow, useTimestamp, useTimeAgo, useTimeAgoIntl, useElementByPoint, useMemory, useVibrate); replaces deprecated per-composable interval/ options
NEW: useIdle — now implements Stoppable interface (v14.0.0), returns { pause, resume, stop } in addition to previous return values source

Also changed: useIntersectionObserver rootMargin is now reactive (v14.2.0) · useElementVisibility gains initialValue option (v14.1.0) and inherits reactive rootMargin (v14.2.0) · useDropZone gains checkValidity function (v14.1.0) · useRefHistory gains shouldCommit option (v13.4.0) · useUrlSearchParams gains stringify option (v13.4.0) · watchAtMost now returns (v14.0.0) · gains option and Promise return (v13.6.0) · initial value can now be a ref (v14.0.0) · gains option (v14.2.0) · accepts a function (v14.1.0) · exposes method (v13.7.0) · gains auto-scroll with container-restricted dragging (v14.2.0) · gains option (v13.8.0) · can now be a function (v14.0.0) · target can now be a getter function (v14.0.0)

Best Practices

Pass reactive getters (() => value) as arguments instead of plain refs where possible — VueUse 9+ supports getter arguments, enabling derived reactive values without an intermediate computed (e.g. useTitle(() => isDark.value ? 'Night' : 'Day')) source
Wrap useFetch calls in createFetch for app-wide config — sets base URL, auth headers, and CORS mode once; individual call sites inherit it without re-specifying options source
Use eventFilter option with throttleFilter / debounceFilter instead of manually wrapping callbacks — applies rate-limiting at the composable level for , , and other event-driven composables

Weekly Installs

Repository

harlan-zw/vue-e…m-skills

GitHub Stars

151

First Seen

Feb 19, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

claude-code64

github-copilot62

opencode57

gemini-cli57

codex57

kimi-cli55

Genkit JS 开发指南：AI 应用构建、错误排查与最佳实践

6,100 周安装

Enable mergeDefaults: true (or pass a custom merge function) on useStorage when evolving stored object schemas — without it, new default keys are undefined if absent from existing storage data source

Use StorageSerializers from @vueuse/core when the useStorage default value is null — without a serializer hint, the type cannot be inferred and serialization falls back to raw string source

Use createSharedComposable to share a single composable instance across components — avoids duplicate event listeners and state. Note: in SSR it automatically falls back to a non-shared instance per call to prevent cross-request pollution source

Use computedWithControl when a computed value should only update on specific sources, not all its reactive dependencies — computed cannot opt out of automatic dependency tracking, but computedWithControl decouples the watch source from the getter source

Wrap VueUse calls outside component scope with effectScope() and call scope.stop() for cleanup — not all composables return a stop handle; effectScope is the universal escape hatch when composables are used in stores or non-component contexts source

Pass window option to browser composables like useMouse or useScroll to target iframes or mock globals in tests — all browser API composables accept configurable global dependencies via options source

Pass a custom scheduler to time-based composables (useNow, useCountdown, etc.) to align them with useRafFn or throttle their update rate — introduced in v14.1.0 / v14.2.0; without it, timed composables run on their own internal interval independent of animation frames source

VueUse 核心工具库指南：Vue组合式API必备函数集合与版本更新

🇨🇳中文介绍

vueuse/vueuse @vueuse/core

API 变更

相关 Skills

最佳实践

🇺🇸English

vueuse/vueuse @vueuse/core

API Changes

Best Practices

最新 Skills

vueuse/vueuse `@vueuse/core`

vueuse/vueuse `@vueuse/core`