airi 仓库中的 VueUse watchWithFilter给 Vue watch 装上 eventFilter 事件过滤器【免费下载链接】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本文基于 airi 仓库中维护的 VueUse 函数技能文档 .agents/skills/vueuse-functions/references/watchWithFilter.md完整讲解watchWithFilter的用法、eventFilter选项与三组类型声明并结合 airi 工作区的依赖配置与真实过滤型响应式用法说明如何把防抖、节流等“过滤器”挂到watch回调上以及它在 airi 这类多端Web / Electron / Capacitor应用中的定位。一、watchWithFilter 是什么在 airi 仓库的 VueUse 技能索引 SKILL.md 中watchWithFilter被归类于Watch类别其描述为watchwith additional EventFilter control也就是说它是对 Vue 原生watch的增强API 签名与watch基本一致但额外提供一个eventFilter选项让回调函数在真正执行前经过一层“事件过滤器”防抖、节流、可暂停等。它在索引中的 Invocation 规则为AUTO——即当需求匹配时可直接采用优先于手写定时器方案。官方文档给出的定义一句话概括watchwith additional EventFilter control.二、基本用法完整示例与watch类似但多出一个eventFilter选项该过滤器会作用于回调函数。仓库文档中的完整示例如下import { debounceFilter, watchWithFilter } from vueuse/core watchWithFilter( source, () { console.log(changed!) }, // callback will be called in 500ms debounced manner { eventFilter: debounceFilter(500), // throttledFilter, pausableFilter or custom filters }, )要点拆解第一个参数source与普通watch一致可以是 ref、reactive 对象、getter 或 sources 数组第二个参数watch 回调这里被包在“500ms 防抖”语义下——source 连续变化时只有停止变化 500ms 后回调才会执行一次第三个参数options继承自watch的选项immediate、deep、flush等并额外支持eventFilter。eventFilter支持的内置过滤器见示例注释过滤器语义debounceFilter(ms)防抖变化停止后才触发回调适合搜索输入、窗口拖拽等“落定后处理”场景throttledFilter(ms)节流固定间隔最多触发一次回调适合高频事件滚动、指针移动pausableFilter()可暂停返回{ eventFilter, pause, resume }可运行时挂起/恢复回调自定义过滤器任意符合ConfigurableEventFilter语义的函数均可传入这意味着不需要在业务代码里手写setTimeout管理或自实现节流器过滤器生命周期随 watch 自动管理。三、类型声明逐条解读关联文档给出了watchWithFilter的完整类型声明共三组重载export interface WatchWithFilterOptionsImmediate extends WatchOptionsImmediate, ConfigurableEventFilter {} export declare function watchWithFilter T, Immediate extends Readonlyboolean false, ( source: WatchSourceT, cb: WatchCallbackT, Immediate extends true ? T | undefined : T, options?: WatchWithFilterOptionsImmediate, ): WatchHandle export declare function watchWithFilter T extends ReadonlyMultiWatchSources, Immediate extends Readonlyboolean false, ( sources: [...T], cb: WatchCallbackMapSourcesT, MapOldSourcesT, Immediate, options?: WatchWithFilterOptionsImmediate, ): WatchHandle export declare function watchWithFilter T extends object, Immediate extends Readonlyboolean false, ( source: T, cb: WatchCallbackT, Immediate extends true ? T | undefined : T, options?: WatchWithFilterOptionsImmediate, ): WatchHandle逐项说明WatchWithFilterOptionsImmediate直接扩展WatchOptionsImmediate即原生 watch 的全部选项再交叉混入ConfigurableEventFilter这正是“watch 选项 eventFilter”这一核心能力的类型表达第一个重载单一 WatchSource接受任意WatchSourceTref / reactive / getter回调签名为WatchCallbackT, ...Immediate extends true时 old 值允许为undefined与immediate: true时回调首次执行没有旧值的行为一致第二个重载多源数组sources: [...T]接受元组形式回调通过MapSourcesT/MapOldSourcesT, Immediate得到与数组一一对应的新旧值列表第三个重载对象深观察直接传T extends object等价于对 reactive 对象做深度监听返回值WatchHandle即watch的停止句柄调用后同时取消回调与过滤器的定时逻辑。三个重载与原生watch的三组签名一一对应因此在类型层面watchWithFilter可以视为“drop-in 增强版 watch”——从watch迁移过来只需在 options 里加eventFilter一行。四、airi 仓库中的落地证据1. 依赖版本与引入方式airi 是一个 pnpm monorepo根目录 pnpm-workspace.yaml 中通过 catalog 统一管理版本vueuse/core: ^14.4.0各子包如 apps/stage-web/package.json、packages/stage-pages/package.json中声明为vueuse/core: catalog:即继承该版本。因此上文中import { ... } from vueuse/core的写法在 airi 各应用内直接可用。2. 过滤型响应式在本仓库的真实用法在本仓库源码中检索watchWithFilter本身未找到直接调用即当前代码未直接使用该 API但同一套 EventFilter 机制的“ref 版”等价物被大量使用可作为eventFilter思想的对照佐证apps/stage-pocket/src/pages/devtools/gesture-circle.vue 中同时使用refThrottled(pointComputed, 50)与refDebounced(pointComputed, 50)对同一指针坐标分别做 50ms 节流与 50ms 防抖用于 devtools 手势调试面板apps/stage-tamagotchi/src/renderer/pages/index.vue 中const isOutsideFor250Ms refDebounced(isOutside, 250)把“鼠标移出窗口”的瞬时抖动过滤为“持续 250ms 才算真的移出”这是桌面端悬浮窗口stage-tamagotchi Electron 端的典型防误判模式apps/stage-tamagotchi/src/renderer/pages/settings/connection/index.vue 中const authTokenInputDebounced refDebounced(authTokenInput, 500)对设置页 token 输入做 500ms 防抖后再参与后续逻辑apps/stage-tamagotchi/src/renderer/components/stage-islands/controls-island/controls-island-root.vue 中refDebounced(liveWindowBounds, placementSettleDelayMs)将高频变化的窗口边界“落定”后再用于放置计算。从源码结构看这些场景的共同点是高频响应量窗口边界、指针位置、输入框→ 过滤器降噪 → 稳定值驱动 UI/副作用。watchWithFilter正是把同一套 EventFilterdebounceFilter/throttledFilter/pausableFilter挂到watch回调侧的版本refDebounced解决的是“得到稳定的值”watchWithFilter解决的是“在值变化时按过滤策略执行回调”。3. 与 Watch 类别其他组合的关系SKILL.md 的 Watch 类别同时列出了同族函数可帮助选型函数定位watchDebouncedwatch 内置防抖的快捷方式watchThrottledwatch 内置节流的快捷方式watchPausable可暂停的 watchwatchWithFilter通用出口任意 EventFilter含自定义都能挂入即watchDebounced/watchThrottled/watchPausable可视为watchWithFilter配固定过滤器的快捷形式需要自定义过滤逻辑例如“忽略相等值”“忽略前 N 次”时直接走watchWithFilter即可。五、小结什么时候该用 watchWithFilter结合 airi 仓库文档与源码选型建议如下需要防抖/节流的 watch 回调首选watchWithFilterdebounceFilter/throttledFilter无需手写setTimeout或自管定时器清理需要运行时暂停监听pausableFilter比手动stop()/watch()更细粒度回调句柄仍保留需要自定义过滤规则eventFilter是唯一的通用插槽其他 watch 快捷函数做不到只需要“过滤后的值”而非副作用回调改用refDebounced/refThrottled这是 airi 各应用中目前更常见的写法见第四节示例路径。以上所有示例均基于vueuse/coreairi 工作区当前 catalog 版本为^14.4.0见 pnpm-workspace.yaml在 Vue 3 / Nuxt 3 环境下可直接运行。【免费下载链接】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），仅供参考 airi 仓库中的 VueUse watchWithFilter：给 Vue watch 装上 eventFilter 事件过滤器
airi 仓库中的 VueUse watchWithFilter给 Vue watch 装上 eventFilter 事件过滤器【免费下载链接】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本文基于 airi 仓库中维护的 VueUse 函数技能文档 .agents/skills/vueuse-functions/references/watchWithFilter.md完整讲解watchWithFilter的用法、eventFilter选项与三组类型声明并结合 airi 工作区的依赖配置与真实过滤型响应式用法说明如何把防抖、节流等“过滤器”挂到watch回调上以及它在 airi 这类多端Web / Electron / Capacitor应用中的定位。一、watchWithFilter 是什么在 airi 仓库的 VueUse 技能索引 SKILL.md 中watchWithFilter被归类于Watch类别其描述为watchwith additional EventFilter control也就是说它是对 Vue 原生watch的增强API 签名与watch基本一致但额外提供一个eventFilter选项让回调函数在真正执行前经过一层“事件过滤器”防抖、节流、可暂停等。它在索引中的 Invocation 规则为AUTO——即当需求匹配时可直接采用优先于手写定时器方案。官方文档给出的定义一句话概括watchwith additional EventFilter control.二、基本用法完整示例与watch类似但多出一个eventFilter选项该过滤器会作用于回调函数。仓库文档中的完整示例如下import { debounceFilter, watchWithFilter } from vueuse/core watchWithFilter( source, () { console.log(changed!) }, // callback will be called in 500ms debounced manner { eventFilter: debounceFilter(500), // throttledFilter, pausableFilter or custom filters }, )要点拆解第一个参数source与普通watch一致可以是 ref、reactive 对象、getter 或 sources 数组第二个参数watch 回调这里被包在“500ms 防抖”语义下——source 连续变化时只有停止变化 500ms 后回调才会执行一次第三个参数options继承自watch的选项immediate、deep、flush等并额外支持eventFilter。eventFilter支持的内置过滤器见示例注释过滤器语义debounceFilter(ms)防抖变化停止后才触发回调适合搜索输入、窗口拖拽等“落定后处理”场景throttledFilter(ms)节流固定间隔最多触发一次回调适合高频事件滚动、指针移动pausableFilter()可暂停返回{ eventFilter, pause, resume }可运行时挂起/恢复回调自定义过滤器任意符合ConfigurableEventFilter语义的函数均可传入这意味着不需要在业务代码里手写setTimeout管理或自实现节流器过滤器生命周期随 watch 自动管理。三、类型声明逐条解读关联文档给出了watchWithFilter的完整类型声明共三组重载export interface WatchWithFilterOptionsImmediate extends WatchOptionsImmediate, ConfigurableEventFilter {} export declare function watchWithFilter T, Immediate extends Readonlyboolean false, ( source: WatchSourceT, cb: WatchCallbackT, Immediate extends true ? T | undefined : T, options?: WatchWithFilterOptionsImmediate, ): WatchHandle export declare function watchWithFilter T extends ReadonlyMultiWatchSources, Immediate extends Readonlyboolean false, ( sources: [...T], cb: WatchCallbackMapSourcesT, MapOldSourcesT, Immediate, options?: WatchWithFilterOptionsImmediate, ): WatchHandle export declare function watchWithFilter T extends object, Immediate extends Readonlyboolean false, ( source: T, cb: WatchCallbackT, Immediate extends true ? T | undefined : T, options?: WatchWithFilterOptionsImmediate, ): WatchHandle逐项说明WatchWithFilterOptionsImmediate直接扩展WatchOptionsImmediate即原生 watch 的全部选项再交叉混入ConfigurableEventFilter这正是“watch 选项 eventFilter”这一核心能力的类型表达第一个重载单一 WatchSource接受任意WatchSourceTref / reactive / getter回调签名为WatchCallbackT, ...Immediate extends true时 old 值允许为undefined与immediate: true时回调首次执行没有旧值的行为一致第二个重载多源数组sources: [...T]接受元组形式回调通过MapSourcesT/MapOldSourcesT, Immediate得到与数组一一对应的新旧值列表第三个重载对象深观察直接传T extends object等价于对 reactive 对象做深度监听返回值WatchHandle即watch的停止句柄调用后同时取消回调与过滤器的定时逻辑。三个重载与原生watch的三组签名一一对应因此在类型层面watchWithFilter可以视为“drop-in 增强版 watch”——从watch迁移过来只需在 options 里加eventFilter一行。四、airi 仓库中的落地证据1. 依赖版本与引入方式airi 是一个 pnpm monorepo根目录 pnpm-workspace.yaml 中通过 catalog 统一管理版本vueuse/core: ^14.4.0各子包如 apps/stage-web/package.json、packages/stage-pages/package.json中声明为vueuse/core: catalog:即继承该版本。因此上文中import { ... } from vueuse/core的写法在 airi 各应用内直接可用。2. 过滤型响应式在本仓库的真实用法在本仓库源码中检索watchWithFilter本身未找到直接调用即当前代码未直接使用该 API但同一套 EventFilter 机制的“ref 版”等价物被大量使用可作为eventFilter思想的对照佐证apps/stage-pocket/src/pages/devtools/gesture-circle.vue 中同时使用refThrottled(pointComputed, 50)与refDebounced(pointComputed, 50)对同一指针坐标分别做 50ms 节流与 50ms 防抖用于 devtools 手势调试面板apps/stage-tamagotchi/src/renderer/pages/index.vue 中const isOutsideFor250Ms refDebounced(isOutside, 250)把“鼠标移出窗口”的瞬时抖动过滤为“持续 250ms 才算真的移出”这是桌面端悬浮窗口stage-tamagotchi Electron 端的典型防误判模式apps/stage-tamagotchi/src/renderer/pages/settings/connection/index.vue 中const authTokenInputDebounced refDebounced(authTokenInput, 500)对设置页 token 输入做 500ms 防抖后再参与后续逻辑apps/stage-tamagotchi/src/renderer/components/stage-islands/controls-island/controls-island-root.vue 中refDebounced(liveWindowBounds, placementSettleDelayMs)将高频变化的窗口边界“落定”后再用于放置计算。从源码结构看这些场景的共同点是高频响应量窗口边界、指针位置、输入框→ 过滤器降噪 → 稳定值驱动 UI/副作用。watchWithFilter正是把同一套 EventFilterdebounceFilter/throttledFilter/pausableFilter挂到watch回调侧的版本refDebounced解决的是“得到稳定的值”watchWithFilter解决的是“在值变化时按过滤策略执行回调”。3. 与 Watch 类别其他组合的关系SKILL.md 的 Watch 类别同时列出了同族函数可帮助选型函数定位watchDebouncedwatch 内置防抖的快捷方式watchThrottledwatch 内置节流的快捷方式watchPausable可暂停的 watchwatchWithFilter通用出口任意 EventFilter含自定义都能挂入即watchDebounced/watchThrottled/watchPausable可视为watchWithFilter配固定过滤器的快捷形式需要自定义过滤逻辑例如“忽略相等值”“忽略前 N 次”时直接走watchWithFilter即可。五、小结什么时候该用 watchWithFilter结合 airi 仓库文档与源码选型建议如下需要防抖/节流的 watch 回调首选watchWithFilterdebounceFilter/throttledFilter无需手写setTimeout或自管定时器清理需要运行时暂停监听pausableFilter比手动stop()/watch()更细粒度回调句柄仍保留需要自定义过滤规则eventFilter是唯一的通用插槽其他 watch 快捷函数做不到只需要“过滤后的值”而非副作用回调改用refDebounced/refThrottled这是 airi 各应用中目前更常见的写法见第四节示例路径。以上所有示例均基于vueuse/coreairi 工作区当前 catalog 版本为^14.4.0见 pnpm-workspace.yaml在 Vue 3 / Nuxt 3 环境下可直接运行。【免费下载链接】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），仅供参考