Vue之vue.$set()方法源码案例详解

/**
 * Set a property on an object. Adds the new property and
 * triggers change notification if the property doesn't
 * already exist.
 */
export function set (target: Array<any> | Object, key: any, val: any): any {
  // 首先判断如果传入的目标对象是undefined, null, primitive(原始值)，或抛出警告
  if (process.env.NODE_ENV !== 'production' &&
    (isUndef(target) || isPrimitive(target))
  ) {
    warn(`Cannot set reactive property on undefined, null, or primitive value: ${(target: any)}`)
  }
  // 判断目标对象target是数组，并且key是合法的索引
  if (Array.isArray(target) && isValidArrayIndex(key)) {
    // 取目标数组的length值和key中较大的值作为target的length属性
    target.length = Math.max(target.length, key)
    // 通过splice对key位置的元素进行替换
    target.splice(key, 1, val)
    return val
  }
  // 如果key在目标对象中已经存在，则直接赋值
  if (key in target && !(key in Object.prototype)) {
    target[key] = val
    return val
  }
  // 获取target中的observer对象
  const ob = (target: any).__ob__
  // 如果target是vue实例或者$data直接返回
  if (target._isVue || (ob && ob.vmCount)) {
    process.env.NODE_ENV !== 'production' && warn(
      'Avoid adding reactive properties to a Vue instance or its root $data ' +
      'at runtime - declare it upfront in the data option.'
    )
    return val
  }
  // 如果ob不存在，说明target不是响应式对象，直接赋值，不触发视图更新
  if (!ob) {
    target[key] = val
    return val
  }
  // 如果ob存在，把key设置为响应式属性
  defineReactive(ob.value, key, val)
  // 发送通知，触发视图更新
  ob.dep.notify()
  return val
}