vue-lynx / toRef

#Function: toRef()

#toRef(value)

function toRef<T>(value): T extends () => infer R ? Readonly<Ref<R>> : T extends Ref ? T : Ref<UnwrapRef<T>>

Used to normalize values / refs / getters into refs.

#Type Parameters

#Parameters

#Returns

T extends () => infer R ? Readonly<Ref<R>> : T extends Ref ? T : Ref<UnwrapRef<T>>

#Examples

// returns existing refs as-is
toRef(existingRef)

// creates a ref that calls the getter on .value access
toRef(() => props.foo)

// creates normal refs from non-function values
// equivalent to ref(1)
toRef(1)

Can also be used to create a ref for a property on a source reactive object. The created ref is synced with its source property: mutating the source property will update the ref, and vice-versa.

const state = reactive({
  foo: 1,
  bar: 2
})

const fooRef = toRef(state, 'foo')

// mutating the ref updates the original
fooRef.value++
console.log(state.foo) // 2

// mutating the original also updates the ref
state.foo++
console.log(fooRef.value) // 3

#See

https://vuejs.org/api/reactivity-utilities.html#toref

#Defined in

node_modules/.pnpm/@vue+reactivity@3.5.30/node_modules/@vue/reactivity/dist/reactivity.d.ts:604

#toRef(object, key)

function toRef<T, K>(object, key): ToRef<T[K]>

#Type Parameters

#Parameters

#Returns

ToRef<T[K]>

#Defined in

node_modules/.pnpm/@vue+reactivity@3.5.30/node_modules/@vue/reactivity/dist/reactivity.d.ts:605

#toRef(object, key, defaultValue)

function toRef<T, K>(
   object, 
   key, 
defaultValue): ToRef<Exclude<T[K], undefined>>

#Type Parameters

#Parameters

#Returns

ToRef<Exclude<T[K], undefined>>

#Defined in

node_modules/.pnpm/@vue+reactivity@3.5.30/node_modules/@vue/reactivity/dist/reactivity.d.ts:606