vueuse-math-skilld

📁 harlan-zw/vue-ecosystem-skills 📅 9 days ago
27
总安装量
27
周安装量
#13756
全站排名
安装命令
npx skills add https://github.com/harlan-zw/vue-ecosystem-skills --skill vueuse-math-skilld

Agent 安装分布

github-copilot 20
opencode 19
gemini-cli 18
amp 17
codex 17
kimi-cli 17

Skill 文档

vueuse/vueuse @vueuse/math

Version: 14.2.1 (Feb 2026) Deps: @vueuse/shared@14.2.1 Tags: alpha: 14.0.0-alpha.3 (Sep 2025), beta: 14.0.0-beta.1 (Sep 2025), latest: 14.2.1 (Feb 2026)

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.

  • DEPRECATED: and, or, not — v14 deprecated in favor of original names logicAnd, logicOr, logicNot source

  • BREAKING: Requires Vue 3.5+ — v14 moved to Vue 3.5 as minimum version, enabling native useTemplateRef and MaybeRefOrGetter source

  • BREAKING: ESM-only — v13 dropped CommonJS (CJS) support entirely source

  • NEW: useAverage — reactively calculate average from an array or variadic arguments

  • NEW: useSum — reactively calculate sum from an array or variadic arguments

  • NEW: createProjection — create a reusable numeric projector between two numeric domains

  • NEW: createGenericProjection — create a projector with a custom mapping function for arbitrary types

  • NEW: usePrecision — options now include math property for rounding strategy (floor, ceil, round)

  • NEW: useClamp — returns ComputedRef instead of Ref when input is a getter or readonly ref

  • NEW: useMath — provides reactive access to any standard Math method via key name

  • NEW: logicAnd, logicOr, logicNot — variadic reactive boolean logic supporting multiple refs

  • NEW: useMax, useMin — support both array and variadic arguments for reactive comparison

  • NEW: useAbs, useCeil, useFloor, useRound, useTrunc — dedicated reactive wrappers for common Math methods

  • NEW: useProjection — reactive numeric projection from one domain to another

Also changed: tsdown build system v14 · WatchSource<T> types v14 · MaybeRefOrGetter native v12.8

Best Practices

  • Use useClamp with a mutable ref to create a self-validating state. When a mutable ref is passed, it returns a writable computed that automatically clamps any value assigned to it source
// Preferred: prevents invalid state assignment
const value = useClamp(shallowRef(0), 0, 10)
value.value = 15 // state remains 10
  • Pass reactive arrays for domains in useProjection to handle dynamic scaling. This is preferred for UI elements like zoomable charts or responsive sliders where the input/output boundaries change over time source

  • Define reusable mappers with createProjection outside component logic. This ensures consistent scaling across different parts of the application and reduces the overhead of redefining domains source

  • Leverage rest arguments in aggregation composables for ad-hoc calculations. useSum, useAverage, useMax, and useMin accept multiple refs directly, avoiding the need to create intermediate array refs

// Preferred: cleaner syntax for fixed sets of refs
const total = useSum(refA, refB, refC)
  • Prefer usePrecision over toFixed for numeric operations. usePrecision returns a number, which prevents type-coercion bugs and allows further mathematical operations without re-parsing strings source

  • Use explicit rounding modes in usePrecision for specific UI requirements. Pass the math option (‘floor’ | ‘ceil’ | ’round’) to control how fractional values are handled in paginators or progress bars source

  • Combine logicAnd or logicOr with @vueuse/core‘s whenever for cleaner side effects. This pattern is more readable than complex manual computed properties when triggering actions based on multiple reactive flags source

  • Employ createGenericProjection for non-linear domain mapping. Provide a custom projector function to handle logarithmic scales or custom eased transitions between numeric domains source

  • Use useMath to reactively derive values from standard Math methods. It automatically wraps multiple arguments and ensures the result updates whenever any input dependency changes source

  • Use logicNot for reactive boolean inversion in templates. It expresses intent more clearly than !ref.value or manual computed wrappers when defining visibility or disabled states