Vue 中 对象 和 数组 的修改 #

// obsrver/index.js
function set (target, key, val) {
  if (isUndef(target) || isPrimitive(target)) {
    // target 是undefined或者非Object/Array类型
  }
  if (Array.isArray(target) && isValidArrayIndex(key)) {
    // 数组类型判断：修改的序号是合法的序号
    target.length = Math.max(target.lengt, key)
    target.splice(key, 1, val) // 利用数组splice方法，这里是经过原型链改写的方法
    return val
  }
  if (key in target && !(key in Object.prototype)) {
    // key是修改对象上的y属性
    target[key] = val
    return val
  }
  const ob = target.__ob__
  if (target._isVue || (ob && ob.vmCount)) {
    // 不能直接修改 vm 实例的属性，也不能直接增加vm实例上的rootData里的数据
    return val
  }
  if (!ob) {
    target[key] = val
    return val
  }
  // set进去的值也变成响应式数据
  // observer实例里的value存储了值
  defineReactive(ob.value, key, val)
  // 每个observer会有一个dep实例，手动通知渲染watcher（或者其他watcher）重新渲染
  // 之前setter函数也会调用dep.notify()
  ob.dep.notify()
  return val
}

// observer/index.js
const arrayProto = Array.prototype
const arrayMethods = Object.create(arrayProto)
const hasProto = '__proto__' in {}

class Observer {
  constructor (value) {
    def(value, '__ob__', this)
    if (Array.isArray(value)) {
      // 数组类型判断
      // 是否支持__proto__ 这个属性
      if (hasProto) {
        // 改写原型链
        protoAugment(value, arrayMethods)
      } else {
        copyAugment(value, arrayMethods, arrayKeys)
      }
    }
  }
}

function protoAugment (target, src) {
  target.__proto__ = src
  // 将数组的原型改为创建出来的Array对象，在调用数组修改方法的时候就会先找到这个新原型上的方法
}

const arrayProto = Array.prototype
const arrayMethods = Object.create(arrayProto)
const methodsToPatch = [
  'push',
  'pop',
  'shift',
  'unshift',
  'splice',
  'sort',
  'reverse'
]
methodsToPatch.forEach(function (method) {
  // 先缓存原方法
  const original = arrayProto[method]
  def(arrayMethods, method, function mutator (...args) {
    // 同样是利用defineProperty来定义这个新原型上的方法，不可枚举
    // 先执行原有方法
    const result = original.apply(this, args)
    const ob = this.__ob__ // 数组内的observer实例
    let inserted
    switch (method) {
      case 'push':
      case 'unshift':
        inserted = args
        break
      case 'splice':
        inserted = args.slice(2)
        break
    }
    // 数组长度经过上面三个操作的话会发生数组长度的变化，有新元素插入或者旧元素被剔除
    if (inserted) ob.observeArray(inserted)
    // 手动通知数组的依赖项
    ob.dep.notify()
    return result
  })
})

// observer/index.js
function del (target, key) {
  if (Array.isArray(target) && isValidArrayIndex(key)) {
    // 数组类型直接调用splice，经过新的原型会手动通知数组的订阅者
    target.splice(key, 1)
    return;
  }
  const ob = target.__ob__
  if (target._isVue || (ob && ob.vmCount)) {
    // vm实例属性 或者 vm实例根data不可修改
    return;
  }
  if (!hasOwn(target, key)) {
    return // target内压根原来就没有key这个属性
  }
  delete target[key] // 直接删除属性
  if (!ob) return
  ob.dep.notify() // 手动通知对象的订阅者
}

// observer/index.js
function defineReactive (obj, key, val, customSetter, shallow) {
  let childOb = !shallow && observer(val) // 传入的值是对象或数组，递归观察，返回子ob
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter () {
      const value = getter ? getter.call(obj) : val
      if (Dep.target) {
        dep.depend() // 依赖收集
        if (childOb) {
          childOb.dep.depend() // 子ob在getter函数进行收集依赖
          if (Array.isArray(value)) {
            // 对于数组的话，数组内每一项都收集这个依赖
            dependArray(value)
          }
        }
      }
      return value
    },
  })
}