Skip to content

Navigation Menu

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

Commit 08f7dc4

Browse filesBrowse files
authored
feat(watchOnce): use vue's native once behaviour (#4750)
1 parent 09cbd3e commit 08f7dc4
Copy full SHA for 08f7dc4

File tree

2 files changed

+33
-23
lines changed
Filter options

2 files changed

+33
-23
lines changed

‎packages/shared/watchOnce/index.md

Copy file name to clipboardExpand all lines: packages/shared/watchOnce/index.md
+3-8
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,12 @@ category: Watch
44

55
# watchOnce
66

7-
`watch` that only triggers once.
8-
9-
::: tip
10-
11-
[Once Watcher](https://vuejs.org/guide/essentials/watchers.html#once-watchers) has been added to Vue [since 3.4](https://github.com/vuejs/core/pull/9034), use `watch(watchSource, callback, { once: true })` instead on supported versions.
12-
13-
:::
7+
Shorthand for watching value with `{ once: true }`. Once the callback fires once, the watcher will be stopped.
8+
See [Vue's docs](https://vuejs.org/guide/essentials/watchers.html#once-watchers) for full details.
149

1510
## Usage
1611

17-
After the callback function has been triggered once, the watch will be stopped automatically.
12+
Similar to `watch`, but with `{ once: true }`
1813

1914
```ts
2015
import { watchOnce } from '@vueuse/core'

‎packages/shared/watchOnce/index.ts

Copy file name to clipboard
+30-15
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,38 @@
11
import type { WatchCallback, WatchOptions, WatchSource, WatchStopHandle } from 'vue'
22
import type { MapOldSources, MapSources } from '../utils'
3-
import { nextTick, watch } from 'vue'
3+
import { watch } from 'vue'
44

55
// overloads
6-
export function watchOnce<T extends Readonly<WatchSource<unknown>[]>, Immediate extends Readonly<boolean> = false>(source: [...T], cb: WatchCallback<MapSources<T>, MapOldSources<T, Immediate>>, options?: WatchOptions<Immediate>): WatchStopHandle
6+
export function watchOnce<T extends Readonly<WatchSource<unknown>[]>>(
7+
source: [...T],
8+
cb: WatchCallback<MapSources<T>, MapOldSources<T, true>>,
9+
options?: Omit<WatchOptions<true>, 'once'>
10+
): WatchStopHandle
711

8-
export function watchOnce<T, Immediate extends Readonly<boolean> = false>(sources: WatchSource<T>, cb: WatchCallback<T, Immediate extends true ? T | undefined : T>, options?: WatchOptions<Immediate>): WatchStopHandle
12+
export function watchOnce<T>(
13+
source: WatchSource<T>,
14+
cb: WatchCallback<T, T | undefined>,
15+
options?: Omit<WatchOptions<true>, 'once'>
16+
): WatchStopHandle
917

10-
// implementation
11-
export function watchOnce<Immediate extends Readonly<boolean> = false>(
12-
source: any,
13-
cb: any,
14-
options?: WatchOptions<Immediate>,
15-
): WatchStopHandle {
16-
const stop = watch(source, (...args) => {
17-
nextTick(() => stop())
18+
export function watchOnce<T extends object>(
19+
source: T,
20+
cb: WatchCallback<T, T | undefined>,
21+
options?: Omit<WatchOptions<true>, 'once'>
22+
): WatchStopHandle
1823

19-
return cb(...args)
20-
}, options)
21-
22-
return stop
24+
/**
25+
* Shorthand for watching value with { once: true }
26+
*
27+
* @see https://vueuse.org/watchOnce
28+
*/
29+
export function watchOnce<T = any>(source: T, cb: any, options?: Omit<WatchOptions, 'once'>) {
30+
return watch(
31+
source as any,
32+
cb,
33+
{
34+
...options,
35+
once: true,
36+
},
37+
)
2338
}

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.