createRef() — vue Function Reference

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

Function typescript CoreInstance Reactivity calls 2 called by 2

Entity Profile

CoreInstance→ Reactivity→ createRef() — vue Function Reference

Dependency Diagram

graph TD
  9db383c1_1631_2173_15e0_354055493aaf["createRef()"]
  166ec01e_7118_3388_99e2_bebb434dcb57["ref()"]
  166ec01e_7118_3388_99e2_bebb434dcb57 -->|calls| 9db383c1_1631_2173_15e0_354055493aaf
  85825569_b5ba_10b2_3838_780bf30b03aa["shallowRef()"]
  85825569_b5ba_10b2_3838_780bf30b03aa -->|calls| 9db383c1_1631_2173_15e0_354055493aaf
  1cb75796_39e2_4190_8602_3712ff6cf2f7["isRef()"]
  9db383c1_1631_2173_15e0_354055493aaf -->|calls| 1cb75796_39e2_4190_8602_3712ff6cf2f7
  345b25ad_bb77_07cb_ecf5_8b82f12ddccd["defineReactive()"]
  9db383c1_1631_2173_15e0_354055493aaf -->|calls| 345b25ad_bb77_07cb_ecf5_8b82f12ddccd
  style 9db383c1_1631_2173_15e0_354055493aaf 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
}