@gluonjs/reactivity


@gluonjs/reactivity / packages/reactivity/src / watch

Function: watch()

watch<T>(source, callback, options?): WatchStopHandle

Type Parameters

T

T

Parameters

source

WatchSource<T>

callback

WatchCallback<T>

options?

WatchOptions = {}

Returns

WatchStopHandle

Example

Observe one Ref or getter, compare old and new values, and register cleanup for work started by each callback:

ts
import {
  ref,
  watch,
  watchEffect,
  type WatchCallback,
  type WatchCleanup,
  type WatchCleanupRegistrar,
  type WatchEffectCallback,
  type WatchOptions,
  type WatchSource,
  type WatchStopHandle,
} from '@gluonjs/reactivity';

const count = ref(0);
const source: WatchSource<number> = count;
const cleanup: WatchCleanup = () => console.log('previous request cancelled');
const registerCleanup: WatchCleanupRegistrar = (callback) => { void callback; };
registerCleanup(cleanup);
const callback: WatchCallback<number> = (value, previous, onCleanup) => {
  console.log(previous, '->', value);
  onCleanup(cleanup);
};
const options: WatchOptions = { immediate: true, flush: 'post' };
const stopWatch: WatchStopHandle = watch(source, callback, options);
const effectCallback: WatchEffectCallback = (onCleanup) => {
  console.log(count.value);
  onCleanup(cleanup);
};
const stopEffect: WatchStopHandle = watchEffect(effectCallback);
count.value = 1;
stopEffect();
stopWatch();