Vue源码之响应式原理

jiezi

5 年前

像 Vue 官网上面说的，vue 是通过 Object.defineProperty 来侦测对象属性值的变化。

function defineReactive (obj, key, val) {let dep = new Dep()
    Object.defineProperty(obj, key, {
         enumerable: true,
          configurable: true,
          get () {return val},
          set (newVal) {if (val === newVal) return
                val = newVal
          }
    })
}

函数 defineReactive 是对 Object.defineProperty 的封装，作用是定义一个响应式的数据。

不过如果只是这样是没有什么用的，真正有用的是收集依赖。在 getter 中收集依赖，在 setter 触发依赖。

Dep (收集依赖)

// 还有几个方法没写，比如怎么移除依赖。class Dep {constructor () {
        // 依赖数组
        this.subs = []}
    addSub (sub) {this.subs.push(sub)
    }
    
    depend (target) {if (Dep.target) {
            // 这时的 Dep.target 是 Watcher 实例
            Dep.target.addDep(this)
        }
    }
    notity () {
        this.subs.forEach(val => {val.update()
        })
    }
    Dep.target = null
}

Watcher (依赖)

// 本来在 Watcher 中也要记录 Dep, 但是偷懒没写了，记录了 Dep 后可以通知收集了 Watcher 的 Dep 移除依赖。class Watcher {constructor (vm, expOrFn, cb) {
        // vm: vue 实例
        // expOrFn: 字符串或函数
        // cb: callback 回调函数
        this.vm = vm
        this.cb = cb
        // 执行 this.getter 就可以读取 expOrFn 的数据，就会收集依赖
        if (typeof expOrFn === 'function') {this.getter = expOrFn} else {
            // parsePath 是读取字符串 keypath 的函数, 具体的可以去浏览 Vue 的源码
            this.getter = parsePath(expOrFn)
        }
        this.value = this.get()}
    get () {
        Dep.target = this
        // 在这里执行 this.getter
        let value = this.getter(this.vm, this.vm)
        Dep.target = null
        return value
    }
    addDep (dep) {dep.addSub(this)
    }
    // 更新依赖
    update () {
        const oldValue = this.value
        this.value = this.get()
        this.cb.call(this.vm, this.value, oldValue)
    }
}

接下来再改一下刚开始定义的 defineReactive 函数

function defineReactive (obj, key, val) {let dep = new Dep() // 闭包
    Object.defineProperty(obj, key, {
          enumerable: true,
          configurable: true,
          get () {
            // 触发 getter 时，收集依赖
            dep.addDep()
            return val
          },
          set (newVal) {if (val === newVal) return
                val = newVal
                // 触发 setter 时，触发 Dep 的 notify，便利依赖
                 dep.notity()}
    })
}

这个时候已经可以侦测数据的单独一个属性，最后再封装一下：

class Observer {constructor (value) {
        this.value = value
        // 侦测数据的变化和侦测对象的变化是有区别的
        if (!Array.isArray(value)) {this.walk(value)
        }
    }
    
    walk (value) {const keys = Object.keys(value)
        keys.forEach(key => {this.defineReactive(value, key, value[key])
        })
    }
}

最后总结一下：

实例化 Watcher 时通过 get 方法把 Dep.target 赋值为当前的 Wathcer 实例，并把 Watcher 实例添加在 Dep 中，当设置数据时，触发 defineReactive 的 set 运行 Dep.notify() 遍历 Dep 中收集的依赖 Watcher 实例，然后触发 Watcher 实例的 update 方法。

Object 可以通过 getter/setter 来侦测变化，但是数组是通过方法来变化，比如 push。这样就不能和对象一样，只能通过拦截器来实现侦测变化。

定义一个拦截器来覆盖 Array.prototype，每当使用数组原型上面的方法操作数组的时候，实际上执行的是拦截器上面的方法，然后再拦截器里面使用 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]
  Object.defineProperty(arrayMethods, method, {
      enumerable: false,
      configurable: true,
      writable: true,
      value: function mutator (...args) {return original.apply(this, args)
      }
  })

然后就要覆盖 Array 的原型：

// 看是否支持__proto__, 如果不支持__proto__，则直接把拦截器的方法直接挂载到 value 上。const hasProto = "__proto__" in {}
const arrayKeys = Object.getOwnPropertyNames(arrayMethods)
class Observer {constructor (value) {
        this.value = value
        if (!Array.isArray(value)) {this.walk(value)
        } else {
            const augment = hasProto ? protoAugment : copyAugment
            augment(value, arrayMethods, arraykeys)
        }
    }
    
    walk (value) {const keys = Object.keys(value)
        keys.forEach(key => {this.defineReactive(value, key, value[key])
        })
    }
}

function protoAugment (target, src: Object) {target.__proto__ = src}

function copyAugment (target: Object, src: Object, keys: Array<string>) {for (let i = 0, l = keys.length; i < l; i++) {const key = keys[i]
    def(target, key, src[key])
  }
}

Array 也是在 getter 中收集依赖，不过依赖存的地方有了变化。Vue.js 把依赖存在 Observer 中：

class Observer {constructor (value) {
        this.value = value
        this.dep = new Dep // 新增 Dep
        if (!Array.isArray(value)) {this.walk(value)
        } else {
            const augment = hasProto ? protoAugment : copyAugment
            augment(value, arrayMethods, arraykeys)
        }
    }
    
    walk (value) {const keys = Object.keys(value)
        keys.forEach(key => {this.defineReactive(value, key, value[key])
        })
    }
}

至于为什么把 Dep 存在 Observer 是因为必须在 getter 和拦截器中都能访问到。

function defineReactive (data, key, val) {let childOb = observer(val) // 新增
    let dep = new Dep() 
    Object.defineProperty(obj, key, {
          enumerable: true,
          configurable: true,
          get () {dep.addDep()
            if (childOb) {
                // 在这里收集数组依赖
                childOb.dep.depend()}
            return val
          },
          set (newVal) {if (val === newVal) return
                val = newVal
                 dep.notity()}
    })
    
}
// 如果 value 已经是响应式数据，即有了__ob__属性，则直接返回已经创建的 Observer 实例
// 如果不是响应式数据，则创建一个 Observer 实例
function observer (value, asRootData) {if (!isObject(value)) {return}
    let ob
    if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observe) {ob = value.__ob__} else {ob = new Observer(value)
    }
    return ob
}

因为拦截器是对 Array 原型的封装，所以可以在拦截器中访问到 this（当前正在被操作的数组），

dep 保存在 Observer 实例中，所以需要在 this 上访问到 Observer 实例：

function def (obj, key, val, enumerable) {
    Object.defineProperty(obj, key, {
        value: val,
        enumerable: !!enumerable,
        writable: true,
        configerable: true
    })
}
class Observer {constructor (value) {
        this.value = value
        this.dep = new Dep
        // 把 value 上新增一个不可枚举的属性__ob__, 值为当前的 Observer 实例
        // 这样就可以通过数组的__ob__属性拿到 Observer 实例，然后就可以拿到 Observer 的 depp
        // __ob__不止是为了拿到 Observer 实例，还可以标记是否是响应式数据
        def(value, '__ob__', this) // 新增
        if (!Array.isArray(value)) {this.walk(value)
        } else {
            const augment = hasProto ? protoAugment : copyAugment
            augment(value, arrayMethods, arraykeys)
        }
    }
    
    ...
}

在拦截器中：

methodsToPatch.forEach(function (method) {const original = arrayProto[method]
  def(arrayMethods, method, function mutator (...args) {const result = original.apply(this, args)
      const ob = this.__ob__ // 新增
      ob.dep.notify() // 新增 向依赖发送信息
      return resullt
  })
})

到这里还只是侦测了数组的变化，还要侦测数组元素的变化：

class Observer {constructor (value) {
        this.value = value
        this.dep = new Dep
        def(value, '__ob__', this) 
        if (!Array.isArray(value)) {this.walk(value)
        } else {
            const augment = hasProto ? protoAugment : copyAugment
            augment(value, arrayMethods, arraykeys)
            // 侦测数组中的每一项
            this.observeArray(value) // 新增
        }
    }
    
    observeArray (items) {
        items.forEach(item => {observe(item)
        })
    }
    
    ...
}

然后还要侦测数组中的新增元素的变化：

methodsToPatch.forEach(function (method) {const original = arrayProto[method]
  def(arrayMethods, method, function mutator (...args) {const result = original.apply(this, args)
      const ob = this.__ob__ 
      // 新增开始
      let inserted
      switch (method) {
              case 'push'
              case 'unshift'
                  inserted = args
                  breaak
              case 'splice'
                  inserted = args.slice(2)
                break
      }
      if (inserted) ob.observeArray(inserted)
      // 新增结束
      ob.dep.notify() 
      return resullt
  })
})

总结一下：

Array 追踪变化的方式和 Object 不一样，是通过拦截器去覆盖数组原型的方法来追踪变化。

为了不污染全局的 Array.prototype，所以只针对那些需要侦测变化的数组，对于不支持 __proto__的浏览器则直接把拦截器布置到数组本身上。

在 Observer 中，对每个侦测了变化的数据都加了 __ob__ 属性，并且把this(Observer 实例) 保存在__ob__ 上，主要有两个作用：

标记数据是否被侦测了
可以通过数据拿到__ob__，进一步拿到 Observer 实例。

所以把数组的依赖存放在 Observer 中，当拦截到数组发生变化时，向依赖发送通知。

最后还要通过 observeArray 侦测数组子元素和数组新增元素的变化。

Vue源码之响应式原理

Object 的变化侦测

Array 的变化侦测