1---
2category: Watch
3---
4 
5# watchWithFilter
6 
7`watch` with additional EventFilter control.
8 
9## Usage
10 
11Similar to `watch`, but offering an extra option `eventFilter` which will be applied to the callback function.
12 
13```ts
14import { debounceFilter, watchWithFilter } from '@vueuse/core'
15 
16watchWithFilter(
17  source,
18  () => { console.log('changed!') }, // callback will be called in 500ms debounced manner
19  {
20    eventFilter: debounceFilter(500), // throttledFilter, pausableFilter or custom filters
21  },
22)
23```
24 
25## Type Declarations
26 
27```ts
28export interface WatchWithFilterOptions<Immediate>
29  extends WatchOptions<Immediate>, ConfigurableEventFilter {}
30export declare function watchWithFilter<
31  T extends Readonly<MultiWatchSources>,
32  Immediate extends Readonly<boolean> = false,
33>(
34  sources: [...T],
35  cb: WatchCallback<MapSources<T>, MapOldSources<T, Immediate>>,
36  options?: WatchWithFilterOptions<Immediate>,
37): WatchHandle
38export declare function watchWithFilter<
39  T,
40  Immediate extends Readonly<boolean> = false,
41>(
42  source: WatchSource<T>,
43  cb: WatchCallback<T, Immediate extends true ? T | undefined : T>,
44  options?: WatchWithFilterOptions<Immediate>,
45): WatchHandle
46export declare function watchWithFilter<
47  T extends object,
48  Immediate extends Readonly<boolean> = false,
49>(
50  source: T,
51  cb: WatchCallback<T, Immediate extends true ? T | undefined : T>,
52  options?: WatchWithFilterOptions<Immediate>,
53): WatchHandle
54```
55