Files

T

fargo 1a822493ba format: apply repo prettier (3.8.1) to the folded skills tree

963 markdown files reformatted with the repository's pinned prettier so
pnpm format:check covers the folded tree like every other repo file.

The formatter's embedded-language pass also normalized code fences
(TS semicolons, closed HTML tags in examples, lowercased CSS hex colors,
one renumbered list that skipped an index). Alphanumeric token deltas vs
the fold commit were audited file-by-file; all are formatter-equivalent
markup normalizations plus the four sanitized skills.

2026-08-19 14:37:17 -05:00

3.1 KiB

Raw Blame History

category, alias

category	alias
Watch	ignorableWatch

watchIgnorable

Ignorable watch

Usage

Extended watch that returns extra ignoreUpdates(updater) and ignorePrevAsyncUpdates() to ignore particular updates to the source.

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

const source = shallowRef('foo');

const { stop, ignoreUpdates } = watchIgnorable(source, (v) => console.log(`Changed to ${v}!`));

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

ignoreUpdates(() => {
  source.value = 'foobar';
});
await nextTick(); // (nothing happened)

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

ignoreUpdates(() => {
  source.value = 'ignored';
});
source.value = 'logged';

await nextTick(); // logs: Changed to logged!

WatchOptionFlush timing

watchIgnorable accepts the same options as watch and uses the same defaults. So, by default the composable works using flush: 'pre'.

`ignorePrevAsyncUpdates`

This feature is only for async flush 'pre' and 'post'. If flush: 'sync' is used, ignorePrevAsyncUpdates() is a no-op as the watch will trigger immediately after each update to the source. It is still provided for sync flush so the code can be more generic.

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

const source = shallowRef('foo');

const { ignorePrevAsyncUpdates } = watchIgnorable(source, (v) => console.log(`Changed to ${v}!`));

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

source.value = 'good';
source.value = 'by';
ignorePrevAsyncUpdates();

await nextTick(); // (nothing happened)

source.value = 'prev';
ignorePrevAsyncUpdates();
source.value = 'after';

await nextTick(); // logs: Changed to after!

Type Declarations

export type IgnoredUpdater = (updater: () => void) => void;
export type IgnoredPrevAsyncUpdates = () => void;
export interface WatchIgnorableReturn {
  ignoreUpdates: IgnoredUpdater;
  ignorePrevAsyncUpdates: IgnoredPrevAsyncUpdates;
  stop: WatchStopHandle;
}
export declare function watchIgnorable<
  T extends Readonly<MultiWatchSources>,
  Immediate extends Readonly<boolean> = false,
>(
  sources: [...T],
  cb: WatchCallback<MapSources<T>, MapOldSources<T, Immediate>>,
  options?: WatchWithFilterOptions<Immediate>,
): WatchIgnorableReturn;
export declare function watchIgnorable<T, Immediate extends Readonly<boolean> = false>(
  source: WatchSource<T>,
  cb: WatchCallback<T, Immediate extends true ? T | undefined : T>,
  options?: WatchWithFilterOptions<Immediate>,
): WatchIgnorableReturn;
export declare function watchIgnorable<
  T extends object,
  Immediate extends Readonly<boolean> = false,
>(
  source: T,
  cb: WatchCallback<T, Immediate extends true ? T | undefined : T>,
  options?: WatchWithFilterOptions<Immediate>,
): WatchIgnorableReturn;
/** @deprecated use `watchIgnorable` instead */
export declare const ignorableWatch: typeof watchIgnorable;

3.1 KiB Raw Blame History