defineReactive() — vue Function Reference

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

Function typescript CoreRuntime Observer calls 4 called by 4

Entity Profile

CoreRuntime→ Observer→ defineReactive() — vue Function Reference

Dependency Diagram

graph TD
  772e5b8f_95bc_3463_fed7_f1034ba985e1["defineReactive()"]
  012c0986_6b9d_ad59_8fba_57884312dd3b["index.ts"]
  772e5b8f_95bc_3463_fed7_f1034ba985e1 -->|defined in| 012c0986_6b9d_ad59_8fba_57884312dd3b
  3204874f_4db2_0342_a8fc_5a37bc2a2832["initInjections()"]
  3204874f_4db2_0342_a8fc_5a37bc2a2832 -->|calls| 772e5b8f_95bc_3463_fed7_f1034ba985e1
  7f0dd149_783c_767f_2b75_50290f62a377["initProps()"]
  7f0dd149_783c_767f_2b75_50290f62a377 -->|calls| 772e5b8f_95bc_3463_fed7_f1034ba985e1
  90ef1d3a_2785_5dda_2141_19e108797c9d["constructor()"]
  90ef1d3a_2785_5dda_2141_19e108797c9d -->|calls| 772e5b8f_95bc_3463_fed7_f1034ba985e1
  30a55d4c_1b7d_ce16_2a1e_1bfee103e294["set()"]
  30a55d4c_1b7d_ce16_2a1e_1bfee103e294 -->|calls| 772e5b8f_95bc_3463_fed7_f1034ba985e1
  c50e49cd_c223_e73e_c96d_1c8391fde3c1["observe()"]
  772e5b8f_95bc_3463_fed7_f1034ba985e1 -->|calls| c50e49cd_c223_e73e_c96d_1c8391fde3c1
  127eb37f_bb82_724e_10d1_24e519f60aab["depend()"]
  772e5b8f_95bc_3463_fed7_f1034ba985e1 -->|calls| 127eb37f_bb82_724e_10d1_24e519f60aab
  c8c14096_b675_5d42_1539_14ab0cdbaa99["dependArray()"]
  772e5b8f_95bc_3463_fed7_f1034ba985e1 -->|calls| c8c14096_b675_5d42_1539_14ab0cdbaa99
  399dccff_c2d5_9afe_7a83_39f1cdff28f7["notify()"]
  772e5b8f_95bc_3463_fed7_f1034ba985e1 -->|calls| 399dccff_c2d5_9afe_7a83_39f1cdff28f7
  style 772e5b8f_95bc_3463_fed7_f1034ba985e1 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()