Vue内部原理（三）| 小册免费学

const arrayProto = Array.prototype
export const arrayMethods = Object.create(arrayProto)
// 列举出所有可以改变数组内容的方法名
const methods = [
  'push',
  'pop',
  'shift',
  'unshift',
  'splice',
  'sort',
  'reverse'
]
methods.forEach(function (method) {
  // 原来数组的方法
  const original = arrayProto[method]
  // def工具，为对象设置函数属性
  def(arrayMethods, method, function mutator (...args) {
    // 执行原方法，指定this
    const result = original.apply(this, args)
    // 每个属性都维护一个子的观察者，后面会说到
    const ob = this.__ob__
    let inserted
    // 处理新加入的参数
    switch (method) {
      case 'push':
      case 'unshift':
        // push和unshift都会在这里处理，获取参数，参数也需要做响应式处理
        inserted = args
        break
      case 'splice':
        // splice的新加的参数是从第三位开始的，如arr.splice(2, 1, 'bar')
        inserted = args.slice(2)
        break
    }
    if (inserted) ob.observeArray(inserted)
    // 通知更新，后面依赖收集会说到
    ob.dep.notify()
    // 将原方法执行的结果返回
    return result
  })
})
// util.js
export function def(obj, key, value, enumerable = false) {
  Object.defineProperty(obj, key, {
    value,
    enumerable,
    writable: true,
    configurable: true
  })
}
复制代码

export default class Observer {
  constructor(value) {
    this.value = value
    // 用于维护依赖，后面会说
    this.dep = new Dep()
    def(value, '__ob__', this)
    // 类型检测
    if (Array.isArray(value)) {
      // 使用setPrototypeOf可以将第二个参数作为第一个参数__proto__
      Object.setPrototypeOf(value, arrayMethods)
      this.observeArray(value)
    } else {
      // 之前有observe的过滤，能够到这里的不是数组就是对象
      this.walk(value)
    }
  }
  walk(obj) {
    Object.keys(obj).forEach((key) => defineReactive(obj, key, obj[key]))
  }
  // 将数组元素遍历观察
  observeArray(arr) {
    arr.forEach((i) => observe(i))
  }
}
复制代码