createRef() — vue Function Reference

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

Function typescript CoreRuntime VNodePatch calls 2 called by 2

Entity Profile

CoreRuntime→ VNodePatch→ createRef() — vue Function Reference

Dependency Diagram

graph TD
  8ae90034_2894_93a3_a1c6_fc0c92d3709b["createRef()"]
  5f3612a3_43fc_68c4_6353_8d8d31d9b441["ref()"]
  5f3612a3_43fc_68c4_6353_8d8d31d9b441 -->|calls| 8ae90034_2894_93a3_a1c6_fc0c92d3709b
  d1ba56b2_af69_8479_47bc_048c15c92d02["shallowRef()"]
  d1ba56b2_af69_8479_47bc_048c15c92d02 -->|calls| 8ae90034_2894_93a3_a1c6_fc0c92d3709b
  f00627f9_f6f9_0415_07cf_adaab8eba795["isRef()"]
  8ae90034_2894_93a3_a1c6_fc0c92d3709b -->|calls| f00627f9_f6f9_0415_07cf_adaab8eba795
  558ee358_0776_b0dd_fc5b_6c8f87e1a04e["defineReactive()"]
  8ae90034_2894_93a3_a1c6_fc0c92d3709b -->|calls| 558ee358_0776_b0dd_fc5b_6c8f87e1a04e
  style 8ae90034_2894_93a3_a1c6_fc0c92d3709b fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

src/v3/reactivity/ref.ts lines 62–75

function createRef(rawValue: unknown, shallow: boolean) {
  if (isRef(rawValue)) {
    return rawValue
  }
  const ref: any = {}
  def(ref, RefFlag, true)
  def(ref, ReactiveFlags.IS_SHALLOW, shallow)
  def(
    ref,
    'dep',
    defineReactive(ref, 'value', rawValue, null, shallow, isServerRendering())
  )
  return ref
}