@gluonjs/reactivity


@gluonjs/reactivity / packages/reactivity/src / Ref

Interface: Ref<T>

Extended by

Type Parameters

T

T = unknown

Properties

value

value: T

Example

Use the mutable .value contract shared by refs, watchers, and helpers that accept a reactive scalar:

ts
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,
);