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 環境下可直接運行?！久赓M下載鏈接】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 環境下可直接運行?！久赓M下載鏈接】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），僅供參考