reactiveComputed

v0.0.14testeddemo

Computed that resolves to a reactive object whose individual fields stay reactive — read a single property and only that property is tracked, instead of the whole getter re-running on every access. The getter is wrapped in a single cached computed, so the object is recomputed only when one of its reactive dependencies changes. The returned value is a reactive proxy over that computed: destructuring with toRefs, spreading and writing back individual fields all work as on a normal reactive object.

Source Tests

Examples

const state = reactiveComputed(() => ({
  foo: count.value,
  bar: count.value * 2,
}));
// reading state.bar only depends on `bar`

// nested refs returned by the getter are unwrapped and kept writable
const name = ref('a');
const obj = reactiveComputed(() => ({ name }));
obj.name; // 'a'
obj.name = 'b'; // writes through to name.value

Demo

Loading demo…

Signature

export function reactiveComputed<T extends object>(
  getter: ComputedGetter<T>,
): ReactiveComputedReturn<T>{ ... }

Type Parameters

Textends object

Parameters

Parameter	Type	Default	Description
`getter`	`ComputedGetter<T>`	—	Factory returning the object to expose reactively

Returns

ReactiveComputedReturn<T>A reactive object backed by the cached computed