defineReactive() — vue Function Reference

Architecture documentation for the defineReactive() function in index.ts from the vue codebase.

Function typescript CoreInstance VDOM calls 4 called by 5

Entity Profile

CoreInstance→ VDOM→ defineReactive() — vue Function Reference

Dependency Diagram

graph TD
  345b25ad_bb77_07cb_ecf5_8b82f12ddccd["defineReactive()"]
  1dadabb5_0ac6_f33d_3f06_a8220ba63554["initInjections()"]
  1dadabb5_0ac6_f33d_3f06_a8220ba63554 -->|calls| 345b25ad_bb77_07cb_ecf5_8b82f12ddccd
  e399206d_b17d_5ac0_8caa_dab87591e37e["initProps()"]
  e399206d_b17d_5ac0_8caa_dab87591e37e -->|calls| 345b25ad_bb77_07cb_ecf5_8b82f12ddccd
  880c6a62_2aaa_589b_5776_d50c07b1b059["constructor()"]
  880c6a62_2aaa_589b_5776_d50c07b1b059 -->|calls| 345b25ad_bb77_07cb_ecf5_8b82f12ddccd
  1c6c2c60_cb0c_a3fc_17fe_30271386e3b6["set()"]
  1c6c2c60_cb0c_a3fc_17fe_30271386e3b6 -->|calls| 345b25ad_bb77_07cb_ecf5_8b82f12ddccd
  9db383c1_1631_2173_15e0_354055493aaf["createRef()"]
  9db383c1_1631_2173_15e0_354055493aaf -->|calls| 345b25ad_bb77_07cb_ecf5_8b82f12ddccd
  38718d0e_50b6_f32c_7ce6_c7fe083f1ba2["observe()"]
  345b25ad_bb77_07cb_ecf5_8b82f12ddccd -->|calls| 38718d0e_50b6_f32c_7ce6_c7fe083f1ba2
  3e3c4a43_0494_5d27_e47e_6cc391330201["depend()"]
  345b25ad_bb77_07cb_ecf5_8b82f12ddccd -->|calls| 3e3c4a43_0494_5d27_e47e_6cc391330201
  beeed3cb_821a_59c9_646a_5317e05efde7["dependArray()"]
  345b25ad_bb77_07cb_ecf5_8b82f12ddccd -->|calls| beeed3cb_821a_59c9_646a_5317e05efde7
  066df273_90c0_35dd_cd79_8e43c3f6c8ba["notify()"]
  345b25ad_bb77_07cb_ecf5_8b82f12ddccd -->|calls| 066df273_90c0_35dd_cd79_8e43c3f6c8ba
  style 345b25ad_bb77_07cb_ecf5_8b82f12ddccd fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

src/core/observer/index.ts lines 128–214

export function defineReactive(
  obj: object,
  key: string,
  val?: any,
  customSetter?: Function | null,
  shallow?: boolean,
  mock?: boolean,
  observeEvenIfShallow = false
) {
  const dep = new Dep()

  const property = Object.getOwnPropertyDescriptor(obj, key)
  if (property && property.configurable === false) {
    return
  }

  // cater for pre-defined getter/setters
  const getter = property && property.get
  const setter = property && property.set
  if (
    (!getter || setter) &&
    (val === NO_INITIAL_VALUE || arguments.length === 2)
  ) {
    val = obj[key]
  }

  let childOb = shallow ? val && val.__ob__ : observe(val, false, mock)
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter() {
      const value = getter ? getter.call(obj) : val
      if (Dep.target) {
        if (__DEV__) {
          dep.depend({
            target: obj,
            type: TrackOpTypes.GET,
            key
          })
        } else {
          dep.depend()
        }
        if (childOb) {
          childOb.dep.depend()
          if (isArray(value)) {
            dependArray(value)
          }
        }
      }
      return isRef(value) && !shallow ? value.value : value
    },
    set: function reactiveSetter(newVal) {
      const value = getter ? getter.call(obj) : val
      if (!hasChanged(value, newVal)) {
        return
      }
      if (__DEV__ && customSetter) {
        customSetter()
      }
      if (setter) {
        setter.call(obj, newVal)
      } else if (getter) {
        // #7981: for accessor properties without setter
        return
      } else if (!shallow && isRef(value) && !isRef(newVal)) {
        value.value = newVal
        return
      } else {
        val = newVal
      }
      childOb = shallow ? newVal && newVal.__ob__ : observe(newVal, false, mock)
      if (__DEV__) {
        dep.notify({
          type: TriggerOpTypes.SET,
          target: obj,
          key,
          newValue: newVal,
          oldValue: value
        })
      } else {
        dep.notify()
      }
    }
  })

  return dep
}