makeReactive() — vue Function Reference

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

Function typescript CoreInstance Reactivity calls 6 called by 2

Entity Profile

CoreInstance→ Reactivity→ makeReactive() — vue Function Reference

Dependency Diagram

graph TD
  89906332_8c06_b77c_4ba5_2b07c2cb4236["makeReactive()"]
  046b62e2_0a96_ece1_df19_7500caff40c6["reactive()"]
  046b62e2_0a96_ece1_df19_7500caff40c6 -->|calls| 89906332_8c06_b77c_4ba5_2b07c2cb4236
  ae14044b_ea73_c6de_2889_aff2cd0a567a["shallowReactive()"]
  ae14044b_ea73_c6de_2889_aff2cd0a567a -->|calls| 89906332_8c06_b77c_4ba5_2b07c2cb4236
  3d048a11_6942_67b5_c66e_0aa58e3d5e37["isReadonly()"]
  89906332_8c06_b77c_4ba5_2b07c2cb4236 -->|calls| 3d048a11_6942_67b5_c66e_0aa58e3d5e37
  ae14044b_ea73_c6de_2889_aff2cd0a567a["shallowReactive()"]
  89906332_8c06_b77c_4ba5_2b07c2cb4236 -->|calls| ae14044b_ea73_c6de_2889_aff2cd0a567a
  046b62e2_0a96_ece1_df19_7500caff40c6["reactive()"]
  89906332_8c06_b77c_4ba5_2b07c2cb4236 -->|calls| 046b62e2_0a96_ece1_df19_7500caff40c6
  85825569_b5ba_10b2_3838_780bf30b03aa["shallowRef()"]
  89906332_8c06_b77c_4ba5_2b07c2cb4236 -->|calls| 85825569_b5ba_10b2_3838_780bf30b03aa
  38718d0e_50b6_f32c_7ce6_c7fe083f1ba2["observe()"]
  89906332_8c06_b77c_4ba5_2b07c2cb4236 -->|calls| 38718d0e_50b6_f32c_7ce6_c7fe083f1ba2
  e415240e_774b_2bed_aedc_a5e7fb23cfb9["isCollectionType()"]
  89906332_8c06_b77c_4ba5_2b07c2cb4236 -->|calls| e415240e_774b_2bed_aedc_a5e7fb23cfb9
  style 89906332_8c06_b77c_4ba5_2b07c2cb4236 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.`
        )
      }
    }
  }
}