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

2.2 KiB

Raw Blame History

category, alias

category	alias
Reactivity	controlledComputed

computedWithControl

Explicitly define the dependencies of computed.

Usage

import { computedWithControl } from '@vueuse/core';

const source = ref('foo');
const counter = ref(0);

const computedRef = computedWithControl(
  () => source.value, // watch source, same as `watch`
  () => counter.value, // computed getter, same as `computed`
);

With this, the changes of counter won't trigger computedRef to update but the source ref does.

// @include: main
// ---cut---
console.log(computedRef.value); // 0

counter.value += 1;

console.log(computedRef.value); // 0

source.value = 'bar';

console.log(computedRef.value); // 1

Manual Triggering

You can also manually trigger the update of the computed by:

// @include: main
// ---cut---
const computedRef = computedWithControl(
  () => source.value,
  () => counter.value,
);

computedRef.trigger();

Deep Watch

Unlike computed, computedWithControl is shallow by default. You can specify the same options as watch to control the behavior:

const source = ref({ name: 'foo' });

const computedRef = computedWithControl(source, () => counter.value, { deep: true });

Type Declarations

export interface ComputedWithControlRefExtra {
  /**
   * Force update the computed value.
   */
  trigger: () => void;
}
export interface ComputedRefWithControl<T> extends ComputedRef<T>, ComputedWithControlRefExtra {}
export interface WritableComputedRefWithControl<T>
  extends WritableComputedRef<T>, ComputedWithControlRefExtra {}
export type ComputedWithControlRef<T = any> =
  | ComputedRefWithControl<T>
  | WritableComputedRefWithControl<T>;
export declare function computedWithControl<T>(
  source: WatchSource | MultiWatchSources,
  fn: ComputedGetter<T>,
  options?: WatchOptions,
): ComputedRefWithControl<T>;
export declare function computedWithControl<T>(
  source: WatchSource | MultiWatchSources,
  fn: WritableComputedOptions<T>,
  options?: WatchOptions,
): WritableComputedRefWithControl<T>;
/** @deprecated use `computedWithControl` instead */
export declare const controlledComputed: typeof computedWithControl;

2.2 KiB Raw Blame History