前端【免费下载链接】vueuseCollection of essential Vue Composition Utilities for Vue 3项目地址https://gitcode.com/gh_mirrors/vu/vueuse点击查看免费下载useNow是 VueUse 提供的一个轻量级组合式函数用于在 Vue 3 应用中获取响应式的当前 Date 实例。它默认通过requestAnimationFrame驱动时间刷新并提供pause/resume/isActive等控制能力非常适合时钟、计时器、倒计时、时间轴等实时渲染场景。读完本文你将掌握useNow的基础用法、controls与自定义scheduler配置、组件式调用方式以及其底层基于shallowRef与调度器的实现原理。快速上手基础用法useNow的定位非常纯粹——Reactive current Date instance响应式的当前日期实例。最简单的调用方式如下import { useNow } from vueuse/core const now useNow()调用后now是一个ShallowRefDate其值会随着当前时间的推移而不断更新。在模板中直接使用即可script setup langts import { useNow } from vueuse/core const now useNow() /script template divNow: {{ now }}/div /template对应的官方演示见 demo.vue这正是该组合式函数最典型的应用场景。由于useNow依赖浏览器端的requestAnimationFrame它主要面向客户端渲染环境对应测试文件也命名为index.browser.test.ts。选项与返回类型useNow的完整签名如下见 index.tsexport function useNow(options?: UseNowOptionsfalse): ShallowRefDate export function useNow(options: UseNowOptionstrue): { now: ShallowRefDate } Pausable它接受一个可选的UseNowOptions目前包含两个配置项配置项类型默认值说明controlsbooleanfalse是否暴露pause、resume、isActive等控制能力scheduler(cb: Fn) PausableuseRafFn自定义调度器决定时间值如何被驱动刷新其中controls会通过**条件类型conditional type**影响返回值结构。从源码UseNowReturn的定义index.ts可以看出controls: false默认时返回ShallowRefDate即直接返回时间 refcontrols: true时返回{ now: ShallowRefDate } Pausable即解构出now以及pause、resume、isActive。启用 controlsimport { useNow } from vueuse/core const { now, pause, resume } useNow({ controls: true })这是官方文档给出的第二种用法。拿到控制能力后你可以随时暂停时间刷新// 暂停更新时间 pause() // 恢复更新时间 resume() // 读取当前是否处于刷新状态 // isActive: ReadonlyShallowRefbooleanPausable接口定义在 packages/shared/utils/types.ts包含三个成员isActive只读的ShallowRefboolean标识调度器当前是否在运行pause临时暂停效果执行resume恢复效果执行。源码原理shallowRef 调度器useNow的实现非常精简index.ts核心逻辑只有三步export function useNow(options: UseNowOptionsboolean {}): UseNowReturnboolean { const { controls: exposeControls false, scheduler useRafFn, } options const now shallowRef(new Date()) const update () now.value new Date() const controls scheduler(update) if (exposeControls) { return { now, ...controls, } } else { return now } }三个关键设计点值得注意1. 使用shallowRef而非ref。now存储的是一个Date对象但每次刷新时都是整体替换为新的new Date()实例并不涉及对 Date 内部属性的深层追踪因此用shallowRef即可获得最优性能避免不必要的深层响应式开销。源码中useNow被标记了__NO_SIDE_EFFECTS__意味着在构建时会被识别为无副作用函数便于摇树优化。2. 刷新逻辑与调度器解耦。update () now.value new Date()只是单纯地把当前时间写入 ref至于多久更新一次完全由scheduler决定。默认调度器是useRafFn即每一帧约 60fps刷新一次。3.controls展开传递。当exposeControls为true时直接把调度器返回的Pausable控制项展开到返回值中实现{ now, pause, resume, isActive }的结构。默认调度器 useRafFn 的底层行为默认调度器useRafFn实现在 useRafFn/index.ts它基于浏览器的requestAnimationFrameAPI 工作并通过isActive、previousFrameTimestamp和rafId维护循环状态。其关键行为包括创建时默认立即启动immediate true并调用tryOnScopeDispose(pause)因此在组件卸载或作用域销毁时会自动停止刷新无需手动清理支持fpsLimit限制每秒执行帧数默认null不限制内部通过比较delta与1000 / limit决定是否跳过当前帧pause()会调用window.cancelAnimationFrame(rafId)取消下一帧注册resume()则重置时间戳后重新注册。由于这些行为被封装成PausableuseNow得以完全复用而无需重复实现定时逻辑。自定义调度器控制刷新频率scheduler选项的存在让useNow的刷新策略变得完全可定制。任何符合(cb: Fn) Pausable签名的函数都可以作为调度器例如改用useIntervalFn按固定时间间隔刷新这在useNow的官方测试 index.browser.test.ts 中有直接验证import { useNow } from vueuse/core import { useIntervalFn } from vueuse/shared // 每 1000ms 刷新一次时间 const { now } useNow({ controls: true, scheduler: cb useIntervalFn(cb, 1000), })甚至可以实现惰性启动——默认调度器useRafFn的immediate为true创建即开始刷新如果你希望一开始不刷新、等到某个时机再resume()可以这样写同样有测试用例覆盖见 index.browser.test.tsimport { useNow } from vueuse/core import { useRafFn } from vueuse/core const { now, resume } useNow({ controls: true, scheduler: cb useRafFn(cb, { immediate: false }), })测试验证了该场景下创建后即使推进 50msnow值也保持不变调用resume()后时间才开始前进。注意scheduler的类型ConfigurableScheduler定义于 packages/core/_configurable.ts即(cb: Fn) Pausable要求返回的调度器必须同时具备暂停与恢复能力这保证了controls模式下pause/resume始终可用。组件式用法UseNow除了组合式函数VueUse 还为useNow提供了对应的渲染函数组件UseNow见 component.ts。该组件将useNow({ controls: true })的返回值用reactive()包装后通过作用域插槽暴露给模板template UseNow v-slot{ now, pause, resume } Now: {{ now }} button clickpause() Pause /button button clickresume() Resume /button /UseNow /template组件内部逻辑component.ts非常直白接收scheduler属性透传给useNow并强制controls: true以获得完整控制项然后通过slots.default(data)将响应式数据注入插槽。由于组件始终开启 controls插槽里总是能拿到now、pause、resume、isActive。行为验证与测试保障useNow的行为在 index.browser.test.ts 中得到了系统验证测试使用vi.useFakeTimers()模拟时间推进覆盖了四条核心路径默认行为useNow()返回的时间戳不大于当前Date.now()惰性调度器immediate: false时时间不前进resume()后才前进组件渲染UseNow通过作用域插槽正确输出时间控制能力对useRafFn与useIntervalFn(cb, 50)两种调度器分别验证pause()后时间冻结、resume()后继续前进。这些测试从侧面印证了useNow的接口契约默认即用、可暂停可恢复、调度器可替换。相关资源索引文档packages/core/useNow/index.md实现源码packages/core/useNow/index.ts组件封装packages/core/useNow/component.ts演示示例packages/core/useNow/demo.vue浏览器测试packages/core/useNow/index.browser.test.ts默认调度器packages/core/useRafFn/index.ts可配置类型与默认窗口packages/core/_configurable.tsPausable类型定义packages/shared/utils/types.ts导出入口packages/core/index.tsexport * from ./useNowuseNow通过响应式 ref 可替换调度器的简洁抽象把当前时间这个最常见的实时数据源变成了一个可组合、可控制、可测试的 Vue 响应式原语。无论是做简单时钟还是构建需要精确控制刷新节奏的时间组件它都是一个值得优先选择的基础工具。赞分享前端【免费下载链接】vueuseCollection of essential Vue Composition Utilities for Vue 3项目地址https://gitcode.com/gh_mirrors/vu/vueuse点击查看免费下载相关推荐wagmi Vue useChainId 组合式函数响应式获取当前链 ID 的完整指南wagmi Vue useChainId 组合式函数响应式获取当前链 ID 的完整指南 在 wagmi/vue 中 useChainId 是获取并实时监听区块链Web3前端如何为Mi-Create开发插件PluginAPI接口与.plg打包完全指南如何为Mi Create开发插件PluginAPI接口与.plg打包完全指南 Mi Create 是一款面向小米可穿戴设备2021年及以后机型的开源表盘创前端PyPTO Tensor 操作全指南数学运算与逻辑结构变换实战PyPTO Tensor 操作全指南数学运算与逻辑结构变换实战 PyPTO 作为 Parallel Tensor/Tile Operation 编程范式为昇前端上一篇终极V2EX增强工具V2EX-Plus让你的社区体验提升10倍下一篇【亲测免费】 推荐项目贡献模板Contributing Template创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考