toRef() — vue Function Reference

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

Function typescript VueCore Instance calls 1 called by 1

Entity Profile

VueCore→ Instance→ toRef() — vue Function Reference

Dependency Diagram

graph TD
  ac5002b9_b356_e771_28b7_dc3f7b34e18a["toRef()"]
  22b44e72_ad0a_6a98_e36a_e325291fd02b["ref.ts"]
  ac5002b9_b356_e771_28b7_dc3f7b34e18a -->|defined in| 22b44e72_ad0a_6a98_e36a_e325291fd02b
  34438a31_0af0_a001_2b0c_a30a1ed7d5eb["toRefs()"]
  34438a31_0af0_a001_2b0c_a30a1ed7d5eb -->|calls| ac5002b9_b356_e771_28b7_dc3f7b34e18a
  f264de96_ce30_ab7e_6f2f_bd7a1a19804f["isRef()"]
  ac5002b9_b356_e771_28b7_dc3f7b34e18a -->|calls| f264de96_ce30_ab7e_6f2f_bd7a1a19804f
  style ac5002b9_b356_e771_28b7_dc3f7b34e18a 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
}