set() — vue Function Reference

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

Function typescript CoreRuntime Observer calls 3 called by 1

Entity Profile

CoreRuntime→ Observer→ set() — vue Function Reference

Dependency Diagram

graph TD
  30a55d4c_1b7d_ce16_2a1e_1bfee103e294["set()"]
  012c0986_6b9d_ad59_8fba_57884312dd3b["index.ts"]
  30a55d4c_1b7d_ce16_2a1e_1bfee103e294 -->|defined in| 012c0986_6b9d_ad59_8fba_57884312dd3b
  9efe5186_8c34_d7d4_88d0_e9a686898b28["mergeData()"]
  9efe5186_8c34_d7d4_88d0_e9a686898b28 -->|calls| 30a55d4c_1b7d_ce16_2a1e_1bfee103e294
  c50e49cd_c223_e73e_c96d_1c8391fde3c1["observe()"]
  30a55d4c_1b7d_ce16_2a1e_1bfee103e294 -->|calls| c50e49cd_c223_e73e_c96d_1c8391fde3c1
  772e5b8f_95bc_3463_fed7_f1034ba985e1["defineReactive()"]
  30a55d4c_1b7d_ce16_2a1e_1bfee103e294 -->|calls| 772e5b8f_95bc_3463_fed7_f1034ba985e1
  399dccff_c2d5_9afe_7a83_39f1cdff28f7["notify()"]
  30a55d4c_1b7d_ce16_2a1e_1bfee103e294 -->|calls| 399dccff_c2d5_9afe_7a83_39f1cdff28f7
  style 30a55d4c_1b7d_ce16_2a1e_1bfee103e294 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

src/core/observer/index.ts lines 223–276

export function set(
  target: any[] | Record<string, any>,
  key: any,
  val: any
): any {
  if (__DEV__ && (isUndef(target) || isPrimitive(target))) {
    warn(
      `Cannot set reactive property on undefined, null, or primitive value: ${target}`
    )
  }
  if (isReadonly(target)) {
    __DEV__ && warn(`Set operation on key "${key}" failed: target is readonly.`)
    return
  }
  const ob = (target as any).__ob__
  if (isArray(target) && isValidArrayIndex(key)) {
    target.length = Math.max(target.length, key)
    target.splice(key, 1, val)
    // when mocking for SSR, array methods are not hijacked
    if (ob && !ob.shallow && ob.mock) {
      observe(val, false, true)
    }
    return val
  }
  if (key in target && !(key in Object.prototype)) {
    target[key] = val
    return val
  }
  if ((target as any)._isVue || (ob && ob.vmCount)) {
    __DEV__ &&
      warn(
        'Avoid adding reactive properties to a Vue instance or its root $data ' +
          'at runtime - declare it upfront in the data option.'
      )
    return val
  }
  if (!ob) {
    target[key] = val
    return val
  }
  defineReactive(ob.value, key, val, undefined, ob.shallow, ob.mock)
  if (__DEV__) {
    ob.dep.notify({
      type: TriggerOpTypes.ADD,
      target: target,
      key,
      newValue: val,
      oldValue: undefined
    })
  } else {
    ob.dep.notify()
  }
  return val
}