1---
2category: Watch
3---
4 
5# watchTriggerable
6 
7Watch that can be triggered manually
8 
9## Usage
10 
11A `watch` wrapper that supports manual triggering of `WatchCallback`, which returns an additional `trigger` to execute a `WatchCallback` immediately.
12 
13```ts
14import { watchTriggerable } from '@vueuse/core'
15import { nextTick, shallowRef } from 'vue'
16 
17const source = shallowRef(0)
18 
19const { trigger, ignoreUpdates } = watchTriggerable(
20  source,
21  v => console.log(`Changed to ${v}!`),
22)
23 
24source.value = 'bar'
25await nextTick() // logs: Changed to bar!
26 
27// Execution of WatchCallback via `trigger` does not require waiting
28trigger() // logs: Changed to bar!
29```
30 
31### `onCleanup`
32 
33When you want to manually call a `watch` that uses the onCleanup parameter; simply taking the `WatchCallback` out and calling it doesn't make it easy to implement the `onCleanup` parameter.
34 
35Using `watchTriggerable` will solve this problem.
36 
37```ts
38import { watchTriggerable } from '@vueuse/core'
39import { shallowRef } from 'vue'
40 
41const source = shallowRef(0)
42 
43const { trigger } = watchTriggerable(
44  source,
45  async (v, _, onCleanup) => {
46    let canceled = false
47    onCleanup(() => canceled = true)
48 
49    await new Promise(resolve => setTimeout(resolve, 500))
50    if (canceled)
51      return
52 
53    console.log(`The value is "${v}"\n`)
54  },
55)
56 
57source.value = 1 // no log
58await trigger() // logs (after 500 ms): The value is "1"
59```
60 
61## Type Declarations
62 
63```ts
64export interface WatchTriggerableReturn<
65  FnReturnT = void,
66> extends WatchIgnorableReturn {
67  /** Execute `WatchCallback` immediately */
68  trigger: () => FnReturnT
69}
70type OnCleanup = (cleanupFn: () => void) => void
71export type WatchTriggerableCallback<V = any, OV = any, R = void> = (
72  value: V,
73  oldValue: OV,
74  onCleanup: OnCleanup,
75) => R
76export declare function watchTriggerable<
77  T extends Readonly<MultiWatchSources>,
78  FnReturnT,
79>(
80  sources: [...T],
81  cb: WatchTriggerableCallback<
82    MapSources<T>,
83    MapOldSources<T, true>,
84    FnReturnT
85  >,
86  options?: WatchWithFilterOptions<boolean>,
87): WatchTriggerableReturn<FnReturnT>
88export declare function watchTriggerable<T, FnReturnT>(
89  source: WatchSource<T>,
90  cb: WatchTriggerableCallback<T, T | undefined, FnReturnT>,
91  options?: WatchWithFilterOptions<boolean>,
92): WatchTriggerableReturn<FnReturnT>
93export declare function watchTriggerable<T extends object, FnReturnT>(
94  source: T,
95  cb: WatchTriggerableCallback<T, T | undefined, FnReturnT>,
96  options?: WatchWithFilterOptions<boolean>,
97): WatchTriggerableReturn<FnReturnT>
98```
99