watch-pausable

Watch sources like Vue's watch, with pause and resume.

Minimal setup

Use a Vue 3.5+ project with Vue SFC compilation configured (see Vite+ integration).

vp install @vizejs/composable

Import the entry directly. Call lifecycle-bound utilities inside <script setup> so cleanup follows the component scope; consult the runtime contract for this entry's SSR and hydration behavior.

import { watchPausable } from "@vizejs/composable/watch-pausable";

Runtime contract

API

watchPausable

Watch sources like Vue's watch, with pause and resume. Unlike the pause() built into Vue 3.5 watch handles, which delivers one catch-up call on resume, changes made while paused are dropped: the callback only ever sees changes that happened while active. The old value passed after a resume is the value from the most recent change Vue observed, whether or not it was delivered. The watcher follows the owning reactive scope and is safe during server rendering.

function watchPausable< const Sources extends WatchSources, Immediate extends Readonly<boolean> = false, >( source: Sources, callback: WatchHelperCallback<Sources, Immediate>, options?: WatchPausableOptions<Immediate>, ): PausableWatchHandle

const { pause, resume } = watchPausable(form, persist, { deep: true });
pause();
form.name = "x"; // not persisted
resume();

watchPausable

function watchPausable( source: WatchSources, callback: WatchCallback<unknown, unknown>, options: WatchPausableOptions<boolean> = {}, ): PausableWatchHandle

Types

PausableWatchHandle

Controls returned by watchPausable.

WatchPausableOptions

Options for watchPausable.