Github

Effect

asd

watch()

Watches one or more reactive data sources and invokes a callback function when the sources change.

watch() is lazy by default - i.e. the callback is only called when the watched source has changed.

Parameters

First argument

  • A getter function that returns a value
  • A ref
  • A reactive object
  • ...or an array of the above.

Second argument

Callback that will be called when the source changes.

The callback receives three arguments: the new value, the old value, and a function for registering a side effect cleanup callback.

The cleanup callback will be called right before the next time the effect is re-run, and can be used to clean up invalidated side effects, e.g. a pending async request.

Third optional argument

  • 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, so that the callback fires on deep mutations.
  • flush adjust the callback's flush timing
  • onTrack / onTrigger debug the watcher's dependencies.
interface WatchOptions extends WatchEffectOptions {
  immediate?: boolean; // default: false
  deep?: boolean; // default: false
  flush?: "pre" | "post" | "sync"; // default: 'pre'
  onTrack?: (event: DebuggerEvent) => void;
  onTrigger?: (event: DebuggerEvent) => void;
}

Example: Stopping the watcher

const stop = watch(source, callback);

// when the watcher is no longer needed:
stop();

watchEffect()

Runs a function immediately while reactively tracking its dependencies and re-runs it whenever the dependencies are changed.

Parameters

First argument

The effect function receives a function that can be used to register a cleanup callback. The cleanup callback will be called right before the next time the effect is re-run, and can be used to clean up invalidated side effects, e.g. a pending async request.

Second optional argument

Object that can be used to adjust the effect's flush timing or to debug the effect's dependencies.

  • Setting flush: 'post' will defer the watcher until after component rendering.

  • In rare cases, it might be necessary to trigger a watcher immediately when a reactive dependency changes, e.g. to invalidate a cache. This can be achieved using flush: 'sync'. However, this setting should be used with caution, as it can lead to problems with performance and data consistency if multiple properties are being updated at the same time.

Example: simple

const count = ref(0);

watchEffect(() => console.log(count.value));
// -> logs 0

count.value++;
// -> logs 1

Example

watchEffect(async (onCleanup) => {
  const { response, cancel } = doAsyncWork(id.value);
  // `cancel` will be called if `id` changes
  // so that previous pending request will be cancelled
  // if not yet completed
  onCleanup(cancel);
  data.value = await response;
});

watchPostEffect()

Alias of watchEffect() with flush: 'post' option.

watchSyncEffect()

Alias of watchEffect() with flush: 'sync' option.