1---
2category: Watch
3alias: ignorableWatch
4---
5 
6# watchIgnorable
7 
8Ignorable watch
9 
10## Usage
11 
12Extended `watch` that returns extra `ignoreUpdates(updater)` and `ignorePrevAsyncUpdates()` to ignore particular updates to the source.
13 
14```ts
15import { watchIgnorable } from '@vueuse/core'
16import { nextTick, shallowRef } from 'vue'
17 
18const source = shallowRef('foo')
19 
20const { stop, ignoreUpdates } = watchIgnorable(
21  source,
22  v => console.log(`Changed to ${v}!`),
23)
24 
25source.value = 'bar'
26await nextTick() // logs: Changed to bar!
27 
28ignoreUpdates(() => {
29  source.value = 'foobar'
30})
31await nextTick() // (nothing happened)
32 
33source.value = 'hello'
34await nextTick() // logs: Changed to hello!
35 
36ignoreUpdates(() => {
37  source.value = 'ignored'
38})
39source.value = 'logged'
40 
41await nextTick() // logs: Changed to logged!
42```
43 
44## WatchOptionFlush timing
45 
46`watchIgnorable` accepts the same options as `watch` and uses the same defaults.
47So, by default the composable works using `flush: 'pre'`.
48 
49## `ignorePrevAsyncUpdates`
50 
51This feature is only for async flush `'pre'` and `'post'`. If `flush: 'sync'` is used, `ignorePrevAsyncUpdates()` is a no-op as the watch will trigger immediately after each update to the source. It is still provided for sync flush so the code can be more generic.
52 
53```ts
54import { watchIgnorable } from '@vueuse/core'
55import { nextTick, shallowRef } from 'vue'
56 
57const source = shallowRef('foo')
58 
59const { ignorePrevAsyncUpdates } = watchIgnorable(
60  source,
61  v => console.log(`Changed to ${v}!`),
62)
63 
64source.value = 'bar'
65await nextTick() // logs: Changed to bar!
66 
67source.value = 'good'
68source.value = 'by'
69ignorePrevAsyncUpdates()
70 
71await nextTick() // (nothing happened)
72 
73source.value = 'prev'
74ignorePrevAsyncUpdates()
75source.value = 'after'
76 
77await nextTick() // logs: Changed to after!
78```
79 
80## Recommended Readings
81 
82- [Ignorable Watch](https://patak.dev/vue/ignorable-watch.html) - by [@patak-dev](https://github.com/patak-dev)
83 
84## Type Declarations
85 
86```ts
87export type IgnoredUpdater = (updater: () => void) => void
88export type IgnoredPrevAsyncUpdates = () => void
89export interface WatchIgnorableReturn {
90  ignoreUpdates: IgnoredUpdater
91  ignorePrevAsyncUpdates: IgnoredPrevAsyncUpdates
92  stop: WatchStopHandle
93}
94export declare function watchIgnorable<
95  T extends Readonly<MultiWatchSources>,
96  Immediate extends Readonly<boolean> = false,
97>(
98  sources: [...T],
99  cb: WatchCallback<MapSources<T>, MapOldSources<T, Immediate>>,
100  options?: WatchWithFilterOptions<Immediate>,
101): WatchIgnorableReturn
102export declare function watchIgnorable<
103  T,
104  Immediate extends Readonly<boolean> = false,
105>(
106  source: WatchSource<T>,
107  cb: WatchCallback<T, Immediate extends true ? T | undefined : T>,
108  options?: WatchWithFilterOptions<Immediate>,
109): WatchIgnorableReturn
110export declare function watchIgnorable<
111  T extends object,
112  Immediate extends Readonly<boolean> = false,
113>(
114  source: T,
115  cb: WatchCallback<T, Immediate extends true ? T | undefined : T>,
116  options?: WatchWithFilterOptions<Immediate>,
117): WatchIgnorableReturn
118/** @deprecated use `watchIgnorable` instead */
119export declare const ignorableWatch: typeof watchIgnorable
120```
121