toRef() — vue Function Reference

Architecture documentation for the toRef() function in ref.ts from the vue codebase.

Function typescript CoreInstance Reactivity calls 1 called by 1

Entity Profile

CoreInstance→ Reactivity→ toRef() — vue Function Reference

Dependency Diagram

graph TD
  c619f776_b648_0a68_f21c_f8846567229b["toRef()"]
  9c32c94a_68ef_7e90_9cbd_f1d89ad7165f["toRefs()"]
  9c32c94a_68ef_7e90_9cbd_f1d89ad7165f -->|calls| c619f776_b648_0a68_f21c_f8846567229b
  1cb75796_39e2_4190_8602_3712ff6cf2f7["isRef()"]
  c619f776_b648_0a68_f21c_f8846567229b -->|calls| 1cb75796_39e2_4190_8602_3712ff6cf2f7
  style c619f776_b648_0a68_f21c_f8846567229b fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

src/v3/reactivity/ref.ts lines 214–234

export function toRef<T extends object, K extends keyof T>(
  object: T,
  key: K,
  defaultValue?: T[K]
): ToRef<T[K]> {
  const val = object[key]
  if (isRef(val)) {
    return val as any
  }
  const ref = {
    get value() {
      const val = object[key]
      return val === undefined ? (defaultValue as T[K]) : val
    },
    set value(newVal) {
      object[key] = newVal
    }
  } as any
  def(ref, RefFlag, true)
  return ref
}