VueUseuseFloor实战指南在 airi 中让Math.floor获得响应式能力【免费下载链接】airi Self hosted, you-owned Grok Companion, a container of souls of waifu, cyber livings to bring them into our worlds, wishing to achieve Neuro-samas altitude. Capable of realtime voice chat, Minecraft, Factorio playing. Web / macOS / Windows supported.项目地址: https://gitcode.com/GitHub_Trending/ai/airiuseFloor是 VueUse 的数学Math工具函数之一为原生Math.floor提供了 Vue 响应式封装输入一个 ref / getter / 普通数值输出一个随输入自动更新的ComputedRefnumber从而让向下取整天然融入组件渲染与计算链路。本文以 useFloor.md 参考文档为主体结合 vueuse-functions SKILL 的调用约定与 airi 仓库中实际的数值取整场景完整解析其用法、类型签名、输入形式与落地要点。读完你可以在任何 Vue 3 / Nuxt 页面中直接套用该组合式函数替代手写watchMath.floor的样板代码。文档背景它在 airi 中的角色在 airi 仓库的 .agents/skills/vueuse-functions 中维护着一套面向 Agent 与开发者的 VueUse 组合式函数决策指南。SKILL 的核心主张是凡是 VueUse 已提供的功能优先复用组合式函数而不是手写自定义逻辑以换取可读性、可维护性与性能。useFloor在该指南中被归类到Math组其调用规则为EXTERNAL见 SKILL.md——即仅在用户已安装vueuse/math依赖时才应使用否则需要先征询是否安装。仓库内各应用如 stage-web/package.json、stage-tamagotchi/package.json 等普遍声明了vueuse/core: catalog:而useFloor属于按需引入的独立子包vueuse/math这一点是使用前需要明确的依赖前提。基础用法一行代码获得响应式向下取整参考文档给出的用法非常直接——把任意数值源传给useFloor它返回的始终是当前输入向下取整后的值import { useFloor } from vueuse/math const value ref(45.95) const result useFloor(value) // 45与直接写Math.floor(value.value)的关键差异在于result是一个ComputedRef会持续跟踪输入的变化。此后任何地方修改value.valueresult.value都会在下一次依赖收集后自动更新为新的取整结果无需手动同步。类型签名拆解从声明读懂行为契约参考文档完整给出了类型声明值得逐行解读/** * Reactive Math.floor * * see https://vueuse.org/useFloor * * __NO_SIDE_EFFECTS__ */ export declare function useFloor( value: MaybeRefOrGetternumber, ): ComputedRefnumber参数value: MaybeRefOrGetternumber该类型是 VueUse 的统一入参约定表示它同时接受三种形态——number字面量、Refnumber、以及返回number的 getter 函数() number。无论调用方持有的是哪一种数据源useFloor都能归一化处理。返回值ComputedRefnumber内部基于 Vue 的computed实现具备惰性求值与依赖缓存特性只有当result.value被读取且输入实际变化时才会重新计算取整结果。可以把推断理解为useFloor本质上等价于对Math.floor调用做了响应式的记忆化包装。__NO_SIDE_EFFECTS__注解这是给打包工具如 rollup / esbuild 的 tree-shaking 流程识别的纯函数标记声明该调用无副作用、结果只取决于入参便于构建阶段安全地内联或剔除因此在模块顶层静态导入并使用是零副作用的。从仓库内同族的姊妹参考文档可以交叉印证这一约定的一致性例如 useCeil.md 中的useCeil(value: MaybeRefOrGetternumber): ComputedRefnumber与 useFloor.md 结构完全相同——整个Math系列共享同一套输入归一化与返回类型设计。三种输入形式与响应式追踪由于入参被归一化为MaybeRefOrGetternumber同一个 API 可以覆盖三类常见数据来源import { useFloor } from vueuse/math import { computed, ref } from vue // 1. 普通数值静态结果几乎不变化但依然类型安全 const fromLiteral useFloor(3.7) // 3 // 2. ref —— 典型用法随源值联动 const progress ref(87.6) const flooredProgress useFloor(progress) progress.value 42.1 // flooredProgress.value 自动变为 42 // 3. getter —— 在读取时才求值适用于依赖其他响应式状态的计算链 const ratio ref(0.72) const size ref(1280) const pixelWidth useFloor(() size.value * ratio.value) // 当 ratio 或 size 任一变化且 pixelWidth.value 被读取时结果随之刷新getter 形态最有价值的一点是它可以把多步计算折叠进同一响应式链让useFloor充当管线末端的取整收口而调用方无需关心中间状态如何维护。边界行为与原生Math.floor完全一致useFloor只是原生Math.floor的响应式包装因此数值语义与 JavaScript 标准保持一致不存在自定义取整规则useFloor(45.95)→45useFloor(0.95)→0负数的向下取整方向Math.floor(-0.95)结果是-1朝更小的方向而非向零截断——这正是它与Math.trunc的本质区别传入NaN、Infinity等非常规数值时行为与原生Math.floor相同不做额外清洗如果你的需求是去掉小数部分、向零靠拢应当选择 useTrunc.md 对应的useTrunc若是四舍五入或向上取整则对应 useRound.md 的useRound与useCeil。当同一数据需要多次不同取整策略时useMath.md 描述的useMath系列函数可进一步减少重复包装。落地参照airi 中的同构场景airi 是一个横跨 Web、Electron 桌面端、移动端与服务器场景的 AI 陪伴应用前端如 stage-web、stage-tamagotchi、stage-pocket全部基于 Vue 3 VueUse 生态。仓库里存在大量对响应式数值取整的真实代码这些正是useFloor的天然适用位置。例如stage-web/src/components/Devtools/PerformanceOverlay.vue 中把毫秒耗时换算为整秒显示const recordingElapsedSeconds computed(() Math.min(60, Math.floor(recordingElapsedMs.value / 1000)))stage-web/src/pages/devtools/performance-visualizer.vue 存在完全相同的ms → 整秒换算模式。这类computed(() Math.floor(xxx.value ...))的写法正是 VueUse 官方建议替换为useFloor的形态——将computedMath.floor两步折叠成单一语义化声明并顺带获得MaybeRefOrGetter带来的入参灵活性直接传 ref 即可不必再写.value。需要说明的是上述场景当前使用原生Math.floor改造时需先在对应应用内安装vueuse/math依赖且属于锦上添花式重构而非缺陷修复。安装与使用前提EXTERNAL 调用规则useFloor不属于vueuse/core主包而是位于vueuse/math子包中。按照 SKILL.md 中的EXTERNAL调用约定使用前需先确认目标项目安装了vueuse/math在本仓库中可执行pnpm --filter 应用名 add vueuse/math等对应命令按需安装若项目尚未引入该依赖应权衡是否仅为取整功能新增依赖避免为单一工具函数过度引入包使用pnpmworkspace 时依赖版本建议与仓库其余 VueUse 包保持一致纳入catalog统一管理本仓库多个应用的package.json即采用catalog:协议声明依赖版本。小结useFloor用极小的 API 表面解决了 Vue 开发中数值取整与响应式联动的常见诉求它以MaybeRefOrGetternumber归一化输入、以ComputedRefnumber惰性输出语义与原生Math.floor完全对齐配合__NO_SIDE_EFFECTS__注解对打包友好。在与 airi 相似的 Vue 3 多端应用中凡是出现computed(() Math.floor(ref.value ...))的地方都可以依据 vueuse-functions SKILL 的原则将其收敛为一行useFloor让代码更简洁、意图更清晰。选择哪个取整函数只需按语义对照useFloor/useCeil/useRound/useTrunc即可快速决策。【免费下载链接】airi Self hosted, you-owned Grok Companion, a container of souls of waifu, cyber livings to bring them into our worlds, wishing to achieve Neuro-samas altitude. Capable of realtime voice chat, Minecraft, Factorio playing. Web / macOS / Windows supported.项目地址: https://gitcode.com/GitHub_Trending/ai/airi创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考