makeReactive() — vue Function Reference

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

Function typescript CompilerSFC StyleProcessor calls 6 called by 2

Entity Profile

CompilerSFC→ StyleProcessor→ makeReactive() — vue Function Reference

Dependency Diagram

graph TD
  baf7ea08_1387_2364_f65b_4a8d69441de0["makeReactive()"]
  abfe3078_bfec_252c_2107_7cdf0dd06f08["reactive.ts"]
  baf7ea08_1387_2364_f65b_4a8d69441de0 -->|defined in| abfe3078_bfec_252c_2107_7cdf0dd06f08
  a63e42d1_b760_d0d0_d947_ace55d768c6d["reactive()"]
  a63e42d1_b760_d0d0_d947_ace55d768c6d -->|calls| baf7ea08_1387_2364_f65b_4a8d69441de0
  94784772_3664_4cb1_fcad_0275dfc601d0["shallowReactive()"]
  94784772_3664_4cb1_fcad_0275dfc601d0 -->|calls| baf7ea08_1387_2364_f65b_4a8d69441de0
  9243ce8a_d877_78fa_a26d_a35d289a1277["isReadonly()"]
  baf7ea08_1387_2364_f65b_4a8d69441de0 -->|calls| 9243ce8a_d877_78fa_a26d_a35d289a1277
  94784772_3664_4cb1_fcad_0275dfc601d0["shallowReactive()"]
  baf7ea08_1387_2364_f65b_4a8d69441de0 -->|calls| 94784772_3664_4cb1_fcad_0275dfc601d0
  a63e42d1_b760_d0d0_d947_ace55d768c6d["reactive()"]
  baf7ea08_1387_2364_f65b_4a8d69441de0 -->|calls| a63e42d1_b760_d0d0_d947_ace55d768c6d
  85b09d73_5262_0d47_695a_c407f729487d["shallowRef()"]
  baf7ea08_1387_2364_f65b_4a8d69441de0 -->|calls| 85b09d73_5262_0d47_695a_c407f729487d
  f464c056_db5f_223e_fc01_2677db93e2f0["ref()"]
  baf7ea08_1387_2364_f65b_4a8d69441de0 -->|calls| f464c056_db5f_223e_fc01_2677db93e2f0
  17645efb_66ee_96d8_ce0d_83b1eee19e3e["isCollectionType()"]
  baf7ea08_1387_2364_f65b_4a8d69441de0 -->|calls| 17645efb_66ee_96d8_ce0d_83b1eee19e3e
  style baf7ea08_1387_2364_f65b_4a8d69441de0 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.`
        )
      }
    }
  }
}