watchPausable

Category

Watch

Export Size

347 B

Last Changed

3 months ago

Alias

pausableWatch

Pausable watch

TIP

Pausable Watcher has been added to Vue since 3.5, use const { stop, pause, resume } = watch(watchSource, callback) instead on supported versions.

Demo

sourceplayground (beta)

Type something below to trigger the watch

Log

Usage

Use as normal the watch, but return extra pause() and resume() functions to control.

import { watchPausable } from '@vueuse/core'
import { nextTick, shallowRef } from 'vue'

const source = shallowRef('foo')

const { stop, pause, resume } = watchPausable(
  source,
  v => console.log(`Changed to ${v}!`),
)

source.value = 'bar'
await nextTick() // Changed to bar!

pause()

source.value = 'foobar'
await nextTick() // (nothing happend)

resume()

source.value = 'hello'
await nextTick() // Changed to hello!

Type Declarations

Show Type Declarations

export interface WatchPausableReturn extends Pausable {
  stop: WatchStopHandle
}
export type WatchPausableOptions<Immediate> =
  WatchWithFilterOptions<Immediate> & PausableFilterOptions
export declare function watchPausable<
  T extends Readonly<WatchSource<unknown>[]>,
  Immediate extends Readonly<boolean> = false,
>(
  sources: [...T],
  cb: WatchCallback<MapSources<T>, MapOldSources<T, Immediate>>,
  options?: WatchPausableOptions<Immediate>,
): WatchPausableReturn
export declare function watchPausable<
  T,
  Immediate extends Readonly<boolean> = false,
>(
  source: WatchSource<T>,
  cb: WatchCallback<T, Immediate extends true ? T | undefined : T>,
  options?: WatchPausableOptions<Immediate>,
): WatchPausableReturn
export declare function watchPausable<
  T extends object,
  Immediate extends Readonly<boolean> = false,
>(
  source: T,
  cb: WatchCallback<T, Immediate extends true ? T | undefined : T>,
  options?: WatchPausableOptions<Immediate>,
): WatchPausableReturn
export { watchPausable as pausableWatch }

Source

Source • Demo • Docs

Contributors

Anthony Fu

Anthony Fu

Howard Guo

IlyaL

Robin

sun0day

vaakian X

lvjiaxuan

Changelog

v12.6.0 on 2/14/2025

ceb56 - feat: add options.initialState to control the initial active value (#4533)

v12.0.0-beta.1 on 11/21/2024

0a9ed - feat!: drop Vue 2 support, optimize bundles and clean up (#4349)