1---
2category: Watch
3---
4 
5# whenever
6 
7Shorthand for watching value to be truthy.
8 
9## Usage
10 
11```js
12import { useAsyncState, whenever } from '@vueuse/core'
13 
14const { state, isReady } = useAsyncState(
15  fetch('https://jsonplaceholder.typicode.com/todos/1').then(t => t.json()),
16  {},
17)
18 
19whenever(isReady, () => console.log(state))
20```
21 
22```ts
23import { whenever } from '@vueuse/core'
24// ---cut---
25// this
26whenever(ready, () => console.log(state))
27 
28// is equivalent to:
29watch(ready, (isReady) => {
30  if (isReady)
31    console.log(state)
32})
33```
34 
35### Callback Function
36 
37Same as `watch`, the callback will be called with `cb(value, oldValue, onInvalidate)`.
38 
39```ts
40import { whenever } from '@vueuse/core'
41// ---cut---
42whenever(height, (current, lastHeight) => {
43  if (current > lastHeight)
44    console.log(`Increasing height by ${current - lastHeight}`)
45})
46```
47 
48### Computed
49 
50Same as `watch`, you can pass a getter function to calculate on each change.
51 
52```ts
53import { whenever } from '@vueuse/core'
54// ---cut---
55// this
56whenever(
57  () => counter.value === 7,
58  () => console.log('counter is 7 now!'),
59)
60```
61 
62### Options
63 
64Options and defaults are same with `watch`.
65 
66```ts
67import { whenever } from '@vueuse/core'
68// ---cut---
69// this
70whenever(
71  () => counter.value === 7,
72  () => console.log('counter is 7 now!'),
73  { flush: 'sync' },
74)
75```
76 
77## Type Declarations
78 
79```ts
80export interface WheneverOptions extends WatchOptions {
81  /**
82   * Only trigger once when the condition is met
83   *
84   * Override the `once` option in `WatchOptions`
85   *
86   * @default false
87   */
88  once?: boolean
89}
90/**
91 * Shorthand for watching value to be truthy
92 *
93 * @see https://vueuse.org/whenever
94 */
95export declare function whenever<T>(
96  source: WatchSource<T | false | null | undefined>,
97  cb: WatchCallback<T>,
98  options?: WheneverOptions,
99): WatchHandle
100```
101