defineReactive() — vue Function Reference

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

Function typescript VueCore Observer calls 4 called by 4

Entity Profile

VueCore→ Observer→ defineReactive() — vue Function Reference

Dependency Diagram

graph TD
  dea83477_00f1_3c8b_f0a1_584882807d1f["defineReactive()"]
  af395f8e_1ac5_a239_71b7_fd29a1c03d2c["index.ts"]
  dea83477_00f1_3c8b_f0a1_584882807d1f -->|defined in| af395f8e_1ac5_a239_71b7_fd29a1c03d2c
  45112b4b_136f_4ca4_9b54_39184304d055["initInjections()"]
  45112b4b_136f_4ca4_9b54_39184304d055 -->|calls| dea83477_00f1_3c8b_f0a1_584882807d1f
  11be9efe_fcdb_2fab_aef6_4fe2f72d828f["initProps()"]
  11be9efe_fcdb_2fab_aef6_4fe2f72d828f -->|calls| dea83477_00f1_3c8b_f0a1_584882807d1f
  e9e3ee0b_266d_b038_5ecd_44bb28d26857["constructor()"]
  e9e3ee0b_266d_b038_5ecd_44bb28d26857 -->|calls| dea83477_00f1_3c8b_f0a1_584882807d1f
  3f865d9f_787c_7a50_d9a7_bb5acf03eb88["set()"]
  3f865d9f_787c_7a50_d9a7_bb5acf03eb88 -->|calls| dea83477_00f1_3c8b_f0a1_584882807d1f
  b757abbc_61ef_2454_445e_6bb830e92333["observe()"]
  dea83477_00f1_3c8b_f0a1_584882807d1f -->|calls| b757abbc_61ef_2454_445e_6bb830e92333
  dd2ea478_4454_41dd_4f1c_546901e17ce6["depend()"]
  dea83477_00f1_3c8b_f0a1_584882807d1f -->|calls| dd2ea478_4454_41dd_4f1c_546901e17ce6
  2d9fa829_b445_3c58_5837_f3ff9f24a2a4["dependArray()"]
  dea83477_00f1_3c8b_f0a1_584882807d1f -->|calls| 2d9fa829_b445_3c58_5837_f3ff9f24a2a4
  98344c54_4454_3804_84b6_6f45b28782b9["notify()"]
  dea83477_00f1_3c8b_f0a1_584882807d1f -->|calls| 98344c54_4454_3804_84b6_6f45b28782b9
  style dea83477_00f1_3c8b_f0a1_584882807d1f 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()