@gluonjs/reactivity / packages/reactivity/src / ComputedRef
Interface: ComputedRef<T>
Extends
Readonly<Ref<T>>
Type Parameters
T
T
Properties
value
readonlyvalue:T
Overrides
Readonly.value
Example
Read the cached readonly .value returned by a computed getter while its reactive dependencies remain unchanged:
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,
);