toRef() — vue Function Reference

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

Function typescript CompilerSFC TemplateTransformer calls 1 called by 1

Entity Profile

CompilerSFC→ TemplateTransformer→ toRef() — vue Function Reference

Dependency Diagram

graph TD
  e6b8ed0b_ae2c_6b11_e0e4_f66ff5fd345c["toRef()"]
  ada43310_8d32_ee2a_f18b_1e24fd4f8a1d["ref.ts"]
  e6b8ed0b_ae2c_6b11_e0e4_f66ff5fd345c -->|defined in| ada43310_8d32_ee2a_f18b_1e24fd4f8a1d
  28426d93_c992_194a_11ac_aae7a5c41df3["toRefs()"]
  28426d93_c992_194a_11ac_aae7a5c41df3 -->|calls| e6b8ed0b_ae2c_6b11_e0e4_f66ff5fd345c
  64ef09a1_8484_35c7_6154_30d045c3ca15["isRef()"]
  e6b8ed0b_ae2c_6b11_e0e4_f66ff5fd345c -->|calls| 64ef09a1_8484_35c7_6154_30d045c3ca15
  style e6b8ed0b_ae2c_6b11_e0e4_f66ff5fd345c 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
}