toRef() — vue Function Reference

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

Function typescript CoreRuntime VNodePatch calls 1 called by 1

Entity Profile

CoreRuntime→ VNodePatch→ toRef() — vue Function Reference

Dependency Diagram

graph TD
  8cd6bec1_60c2_832f_556e_2bc2e21ed86e["toRef()"]
  cc2b31f1_d883_aa50_06f8_97f8ff6c1fc4["toRefs()"]
  cc2b31f1_d883_aa50_06f8_97f8ff6c1fc4 -->|calls| 8cd6bec1_60c2_832f_556e_2bc2e21ed86e
  f00627f9_f6f9_0415_07cf_adaab8eba795["isRef()"]
  8cd6bec1_60c2_832f_556e_2bc2e21ed86e -->|calls| f00627f9_f6f9_0415_07cf_adaab8eba795
  style 8cd6bec1_60c2_832f_556e_2bc2e21ed86e 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
}