defineReactive() — vue Function Reference

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

Function typescript CoreRuntime ObserverSystem calls 4 called by 5

Entity Profile

CoreRuntime→ ObserverSystem→ defineReactive() — vue Function Reference

Dependency Diagram

graph TD
  558ee358_0776_b0dd_fc5b_6c8f87e1a04e["defineReactive()"]
  174af5d8_4bd9_7899_1b31_f3a3cb9b77c6["initInjections()"]
  174af5d8_4bd9_7899_1b31_f3a3cb9b77c6 -->|calls| 558ee358_0776_b0dd_fc5b_6c8f87e1a04e
  a592e65e_63b6_f3cc_cc80_030328fd88d5["initProps()"]
  a592e65e_63b6_f3cc_cc80_030328fd88d5 -->|calls| 558ee358_0776_b0dd_fc5b_6c8f87e1a04e
  b461461c_321d_dc69_edbd_d6367a4ffb41["constructor()"]
  b461461c_321d_dc69_edbd_d6367a4ffb41 -->|calls| 558ee358_0776_b0dd_fc5b_6c8f87e1a04e
  f3ed2d67_a40e_608d_185e_32b185fb8046["set()"]
  f3ed2d67_a40e_608d_185e_32b185fb8046 -->|calls| 558ee358_0776_b0dd_fc5b_6c8f87e1a04e
  8ae90034_2894_93a3_a1c6_fc0c92d3709b["createRef()"]
  8ae90034_2894_93a3_a1c6_fc0c92d3709b -->|calls| 558ee358_0776_b0dd_fc5b_6c8f87e1a04e
  8d0e2195_5d6b_3567_6ef9_1a9c6d6caf20["observe()"]
  558ee358_0776_b0dd_fc5b_6c8f87e1a04e -->|calls| 8d0e2195_5d6b_3567_6ef9_1a9c6d6caf20
  f4977573_27eb_c4dc_cd60_7cd1351c05f0["depend()"]
  558ee358_0776_b0dd_fc5b_6c8f87e1a04e -->|calls| f4977573_27eb_c4dc_cd60_7cd1351c05f0
  af5c161f_9572_0d18_f7a8_94698832dd6c["dependArray()"]
  558ee358_0776_b0dd_fc5b_6c8f87e1a04e -->|calls| af5c161f_9572_0d18_f7a8_94698832dd6c
  a736e9c3_51fa_4ff8_f139_f83b45794e0f["notify()"]
  558ee358_0776_b0dd_fc5b_6c8f87e1a04e -->|calls| a736e9c3_51fa_4ff8_f139_f83b45794e0f
  style 558ee358_0776_b0dd_fc5b_6c8f87e1a04e 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
}