makeReactive() — vue Function Reference

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

Function typescript VueCore GlobalAPI calls 6 called by 2

Entity Profile

VueCore→ GlobalAPI→ makeReactive() — vue Function Reference

Dependency Diagram

graph TD
  fb664353_aa86_ef8d_2524_f4204cadf9fe["makeReactive()"]
  e84ea476_9f30_e7b9_aaa0_4026f0c97365["reactive.ts"]
  fb664353_aa86_ef8d_2524_f4204cadf9fe -->|defined in| e84ea476_9f30_e7b9_aaa0_4026f0c97365
  acccb04d_7ac0_b9de_6459_28ae4de46467["reactive()"]
  acccb04d_7ac0_b9de_6459_28ae4de46467 -->|calls| fb664353_aa86_ef8d_2524_f4204cadf9fe
  752741bd_d268_dc94_2907_951371b7b204["shallowReactive()"]
  752741bd_d268_dc94_2907_951371b7b204 -->|calls| fb664353_aa86_ef8d_2524_f4204cadf9fe
  f4212d06_3802_22f2_e5de_b57826dd5a8e["isReadonly()"]
  fb664353_aa86_ef8d_2524_f4204cadf9fe -->|calls| f4212d06_3802_22f2_e5de_b57826dd5a8e
  752741bd_d268_dc94_2907_951371b7b204["shallowReactive()"]
  fb664353_aa86_ef8d_2524_f4204cadf9fe -->|calls| 752741bd_d268_dc94_2907_951371b7b204
  acccb04d_7ac0_b9de_6459_28ae4de46467["reactive()"]
  fb664353_aa86_ef8d_2524_f4204cadf9fe -->|calls| acccb04d_7ac0_b9de_6459_28ae4de46467
  2f1a9edb_d3ed_0150_0854_de7f9f4691e2["shallowRef()"]
  fb664353_aa86_ef8d_2524_f4204cadf9fe -->|calls| 2f1a9edb_d3ed_0150_0854_de7f9f4691e2
  a1450db6_2efb_6cd1_7916_61560cb0b2f5["ref()"]
  fb664353_aa86_ef8d_2524_f4204cadf9fe -->|calls| a1450db6_2efb_6cd1_7916_61560cb0b2f5
  24d1b598_7844_eabd_7bf3_b06754c98fbb["isCollectionType()"]
  fb664353_aa86_ef8d_2524_f4204cadf9fe -->|calls| 24d1b598_7844_eabd_7bf3_b06754c98fbb
  style fb664353_aa86_ef8d_2524_f4204cadf9fe 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.`
        )
      }
    }
  }
}