SuperAPI AI 工具集

vueuse-math-skilld

前端与建站

查看项目

更新于 10-16 00:20

技能介绍

用途:为 Vue 3 提供响应式数学组合式函数,适合在模板、watcher 中替代 computed(() => Math.x(...)),集中处理数学运算并保持对每个输入的响应。

主要能力:导出 useAbs、useAverage、useCeil、useClamp、useFloor、useMath、useMax、useMin、usePrecision、useProjection、useRound、useSum、useTrunc,以及 createProjection、createGenericProjection、logicAnd、logicOr、logicNot 等。多数组合式函数在 computed 内用 toValue 解析输入,参数接受数字、ref 或 getter,结果为 ComputedRef<number>;useClamp 传入可变 ref 时返回可写 computed。聚合函数支持 ref、getter、数字及其数组,并会扁平化一层嵌套数组。usePrecision 通过十进制字符串缩放避免浮点漂移,math 选项默认 'round'。

使用方式:安装 npm i @vueuse/math @vueuse/core,仅在与 whenever 等核心函数组合时才需要 @vueuse/core。要求 Vue ^3.5.0、Node.js >= 22,自 v13 起仅 ESM,CJS 环境需用动态 import()。示例:const clamped = useClamp(level, 0, 10);const total = useSum(refA, refB, refC);const progress = useProjection(scrollY, [0, pageHeight], [0, 100]);const price = usePrecision(ref(3.1415), 2)。

限制与注意:and、or、not 自 v14 起弃用,应改用 logicAnd、logicOr、logicNot。useAverage 对空数组会得到 NaN,需自行防护;useMax() 无输入为 -Infinity,useMin() 为 Infinity。useMath 只接受 Math 中函数键(如 pow、sqrt),不接受 PI 等常量。投影默认线性,非线性映射需自定义 projector 或使用 createGenericProjection。

适用场景:滑块、图表、进度 UI 的数值映射,布尔标志组合,数值聚合与精度控制等 Vue 3 响应式数学需求。