• Used to normalize values / refs / getters into refs.

    Type Parameters

    • T

    Parameters

    • value: T

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

    // 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

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

  • Type Parameters

    • T extends object
    • K extends string | number | symbol

    Parameters

    • object: T
    • key: K

    Returns ToRef<T[K]>

  • Type Parameters

    • T extends object
    • K extends string | number | symbol

    Parameters

    • object: T
    • key: K
    • defaultValue: T[K]

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