@gluonjs/reactivity / packages/reactivity/src / computed
Function: computed()
Call Signature
computed<
T>(getter):ComputedRef<T>
Type Parameters
T
T
Parameters
getter
() => T
Returns
ComputedRef<T>
Call Signature
computed<
T>(options):WritableComputedRef<T>
Type Parameters
T
T
Parameters
options
Returns
Example
Create a cached derived ref that recomputes only when one of the reactive values read by its getter changes:
import {
computed,
isProxy,
isReactive,
isReadonly,
isRef,
reactive,
readonly,
ref,
shallowReactive,
shallowReadonly,
shallowRef,
toRaw,
unref,
type ComputedRef,
type DeepReadonly,
type Ref,
type WritableComputedOptions,
type WritableComputedRef,
} from '@gluonjs/reactivity';
const raw = { nested: { count: 1 } };
const state = reactive(raw);
const shallowState = shallowReactive(raw);
const view: DeepReadonly<typeof raw> = readonly(raw);
const shallowView = shallowReadonly(raw);
const count: Ref<number> = ref(1);
const selected = shallowRef({ id: 'lamp' });
const doubled: ComputedRef<number> = computed(() => count.value * 2);
const writableOptions: WritableComputedOptions<number> = {
get: () => count.value,
set: (value) => { count.value = value; },
};
const writable: WritableComputedRef<number> = computed(writableOptions);
writable.value = 3;
console.log(
doubled.value, unref(count), selected.value.id,
isRef(count), isReactive(state), isReadonly(view),
isProxy(state.nested), shallowState.nested === raw.nested,
shallowView.nested === raw.nested, toRaw(state) === raw,
);