Skip to content
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions src/api/options-state.md
Original file line number Diff line number Diff line change
Expand Up @@ -275,6 +275,7 @@ Declare watch callbacks to be invoked on data change.

type ObjectWatchOptionItem = {
handler: WatchCallback | string
signal?: AbortSignal
immediate?: boolean // default: false
deep?: boolean // default: false
flush?: 'pre' | 'post' | 'sync' // default: 'pre'
Expand All @@ -293,6 +294,7 @@ Declare watch callbacks to be invoked on data change.

The value can also be a string of a method name (declared via `methods`), or an object that contains additional options. When using the object syntax, the callback should be declared under the `handler` field. Additional options include:

- **`signal`**: stop the watcher when the given [`AbortSignal`](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) is aborted.
- **`immediate`**: trigger the callback immediately on watcher creation. Old value will be `undefined` on the first call.
- **`deep`**: force deep traversal of the source if it is an object or an array, so that the callback fires on deep mutations. See [Deep Watchers](/guide/essentials/watchers#deep-watchers).
- **`flush`**: adjust the callback's flush timing. See [Callback Flush Timing](/guide/essentials/watchers#callback-flush-timing) and [`watchEffect()`](/api/reactivity-core#watcheffect).
Expand Down
13 changes: 13 additions & 0 deletions src/api/reactivity-core.md
Original file line number Diff line number Diff line change
Expand Up @@ -243,6 +243,7 @@ Runs a function immediately while reactively tracking its dependencies and re-ru
type OnCleanup = (cleanupFn: () => void) => void

interface WatchEffectOptions {
signal?: AbortSignal
flush?: 'pre' | 'post' | 'sync' // default: 'pre'
onTrack?: (event: DebuggerEvent) => void
onTrigger?: (event: DebuggerEvent) => void
Expand Down Expand Up @@ -328,6 +329,18 @@ Runs a function immediately while reactively tracking its dependencies and re-ru
})
```

Stopping the watchers with `AbortController`: <sup class="vt-badge" data-text="3.6+" />

```js
const controller = new AbortController()

watchEffect(() => {}, { signal: controller.signal })
watchEffect(() => {}, { signal: controller.signal })

// when the watchers are no longer needed:
controller.abort()
```

Options:

```js
Expand Down