makeReactive() — vue Function Reference

Architecture documentation for the makeReactive() function in reactive.ts from the vue codebase.

Function typescript CoreRuntime VNodePatch calls 6 called by 2

Entity Profile

CoreRuntime→ VNodePatch→ makeReactive() — vue Function Reference

Dependency Diagram

graph TD
  d3dda2d9_7749_e0a8_b53c_ec861b80f46e["makeReactive()"]
  de4bd518_0742_2976_7425_25284d81b858["reactive()"]
  de4bd518_0742_2976_7425_25284d81b858 -->|calls| d3dda2d9_7749_e0a8_b53c_ec861b80f46e
  5e0e8149_c084_bc65_f3b4_53709d2e0da8["shallowReactive()"]
  5e0e8149_c084_bc65_f3b4_53709d2e0da8 -->|calls| d3dda2d9_7749_e0a8_b53c_ec861b80f46e
  f10bb288_275c_a84b_2a0c_83a96cd68f2f["isReadonly()"]
  d3dda2d9_7749_e0a8_b53c_ec861b80f46e -->|calls| f10bb288_275c_a84b_2a0c_83a96cd68f2f
  5e0e8149_c084_bc65_f3b4_53709d2e0da8["shallowReactive()"]
  d3dda2d9_7749_e0a8_b53c_ec861b80f46e -->|calls| 5e0e8149_c084_bc65_f3b4_53709d2e0da8
  de4bd518_0742_2976_7425_25284d81b858["reactive()"]
  d3dda2d9_7749_e0a8_b53c_ec861b80f46e -->|calls| de4bd518_0742_2976_7425_25284d81b858
  d1ba56b2_af69_8479_47bc_048c15c92d02["shallowRef()"]
  d3dda2d9_7749_e0a8_b53c_ec861b80f46e -->|calls| d1ba56b2_af69_8479_47bc_048c15c92d02
  8d0e2195_5d6b_3567_6ef9_1a9c6d6caf20["observe()"]
  d3dda2d9_7749_e0a8_b53c_ec861b80f46e -->|calls| 8d0e2195_5d6b_3567_6ef9_1a9c6d6caf20
  f24256c8_9eca_68b6_8f30_e4517554c31b["isCollectionType()"]
  d3dda2d9_7749_e0a8_b53c_ec861b80f46e -->|calls| f24256c8_9eca_68b6_8f30_e4517554c31b
  style d3dda2d9_7749_e0a8_b53c_ec861b80f46e fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

src/v3/reactivity/reactive.ts lines 53–93

function makeReactive(target: any, shallow: boolean) {
  // if trying to observe a readonly proxy, return the readonly version.
  if (!isReadonly(target)) {
    if (__DEV__) {
      if (isArray(target)) {
        warn(
          `Avoid using Array as root value for ${
            shallow ? `shallowReactive()` : `reactive()`
          } as it cannot be tracked in watch() or watchEffect(). Use ${
            shallow ? `shallowRef()` : `ref()`
          } instead. This is a Vue-2-only limitation.`
        )
      }
      const existingOb = target && target.__ob__
      if (existingOb && existingOb.shallow !== shallow) {
        warn(
          `Target is already a ${
            existingOb.shallow ? `` : `non-`
          }shallow reactive object, and cannot be converted to ${
            shallow ? `` : `non-`
          }shallow.`
        )
      }
    }
    const ob = observe(
      target,
      shallow,
      isServerRendering() /* ssr mock reactivity */
    )
    if (__DEV__ && !ob) {
      if (target == null || isPrimitive(target)) {
        warn(`value cannot be made reactive: ${String(target)}`)
      }
      if (isCollectionType(target)) {
        warn(
          `Vue 2 does not support reactive collection types such as Map or Set.`
        )
      }
    }
  }
}