Vue0.11版本源码阅读系列二：数据观察

Posted 2021-09-03 街角小林

上篇介绍了创建vue实例时大概做了一些什么事情，其中有一项是初始化数据，本篇来看一下数据观察具体是怎么做的。

_initData就是数据观察的起点了：

exports._initData = function () {
  // 代理data到实例
  var data = this._data
  var keys = Object.keys(data)
  var i = keys.length
  var key
  while (i--) {
    key = keys[i]
    if (!_.isReserved(key)) {
      this._proxy(key)
    }
  }
  // 观察data数据
  Observer.create(data).addVm(this)
}

_proxy方法上一篇已经说过了，就是把data数据代理到vue实例上，可以通过this.xx访问到this.data.xx的数据，关键是Observer。

create是Observer类的静态方法，用来给一个数组或对象创建观察对象：

Observer.create = function (value) {
  if (
    value &&
    value.hasOwnProperty(\'__ob__\') &&
    value.__ob__ instanceof Observer
  ) {
    return value.__ob__
  } else if (_.isArray(value)) {
    return new Observer(value, ARRAY)
  } else if (
    _.isPlainObject(value) &&
    !value._isVue
  ) {
    return new Observer(value, OBJECT)
  }
}

从这里可以知道vue只会对数组和纯粹的对象进行观察，其他比如函数什么的是不会观察的，其主要逻辑是判断该属性是否已经观察过了，是的话就返回观察者对象，否则分别对数组和对象使用不同的标志来实例化观察对象。

来看Observer类：

function Observer (value, type) {
  this.id = ++uid
  this.value = value
  this.deps = []
  // 将该观察实例设置到该对象或数组的一个属性，方便后面检查和使用
  _.define(value, \'__ob__\', this)
  if (type === ARRAY) {// 数组分支
    var augment = _.hasProto
      ? protoAugment
      : copyAugment
    augment(value, arrayMethods, arrayKeys)
    this.observeArray(value)
  } else if (type === OBJECT) {// 对象分支
    this.walk(value)
  }
}

初始化了一些属性，先看一下比较简单的对象分支：

p.walk = function (obj) {
  var keys = Object.keys(obj)
  var i = keys.length
  var key, prefix
  while (i--) {
    key = keys[i]
    prefix = key.charCodeAt(0)
    if (prefix !== 0x24 && prefix !== 0x5F) { // 跳过 $ or _开头的私有属性
      this.convert(key, obj[key])
    }
  }
}

walk方法对对象的每个子属性遍历调用convert方法：

p.convert = function (key, val) {
  var ob = this
  // 如果该属性的值也是个数组或对象，那么也需要进行观察，observe方法最终调用的也是Object.create方法
  var childOb = ob.observe(val)
  // 每个属性都会创建一个依赖收集实例，利用闭包来保存
  var dep = new Dep()
  // 该属性的观察实例添加到属性值的观察对象里
  if (childOb) {
    childOb.deps.push(dep)
  }
  Object.defineProperty(ob.value, key, {
    enumerable: true,
    configurable: true,
    get: function () {
      // 这里进行收集依赖，Observer.target是一个全局属性，是一个watcher实例，后续再细说，当引用该属性前把watcher实例赋值给这个全局属性，此处就能引用到，然后收集到该属性的dep实例列表里
      if (Observer.target) {
        Observer.target.addDep(dep)
      }
      return val
    },
    set: function (newVal) {
      if (newVal === val) return
      // 如果旧的值是对象或数组那么肯定也有对应的观察实例，所以需要从对应的观察实例里移除该属性的dep
      var oldChildOb = val && val.__ob__
      if (oldChildOb) {
        var oldDeps = oldChildOb.deps
        oldDeps.splice(oldDeps.indexOf(dep), 1)
      }
      val = newVal
      // 检查新值，新赋的值是对象或数组又需要进行递归创建观察实例
      var newChildOb = ob.observe(newVal)
      if (newChildOb) {
        newChildOb.deps.push(dep)
      }
      // 通知该属性的依赖进行更新
      dep.notify()
    }
  })
}

接下来看一下数组的分支：

if (type === ARRAY) {
    var augment = _.hasProto
    ? protoAugment
    : copyAugment
    augment(value, arrayMethods, arrayKeys)
    this.observeArray(value)
}

vue修改了数组原型上的一些方法，比如：push、shift等等，原因是使用这些方法操作数组不会触发该属性的setter，所以vue就无法检测到变化进行更新，所以需要拦截这些方法进行修改。

这里使用了两种方法，如果浏览器支持__proto__，直接通过修改数组的__proto__来设置新的原型对象，如果不支持，则使用Object.defineProperty来覆盖添加修改后的数组方法。

var arrayProto = Array.prototype
// 创建一个以数组原型对象为原型的新对象
var arrayMethods = Object.create(arrayProto)
;[
  \'push\',
  \'pop\',
  \'shift\',
  \'unshift\',
  \'splice\',
  \'sort\',
  \'reverse\'
]
.forEach(function (method) {
  // 缓存数组的原始方法
  var original = arrayProto[method]
  _.define(arrayMethods, method, function mutator () {
    //  这里将arguments拷贝了一份，避免将该对象直接传递给其他函数使用，可能对性能不利
    var i = arguments.length
    var args = new Array(i)
    while (i--) {
      args[i] = arguments[i]
    }
    // 调用原始方法
    var result = original.apply(this, args)
    // 获取该数组的观察实例
    var ob = this.__ob__
    // 获取新插入数组的值
    var inserted
    switch (method) {
      case \'push\':
        inserted = args
        break
      case \'unshift\':
        inserted = args
        break
      case \'splice\':
        inserted = args.slice(2)
        break
    }
    // 如果有新插入的值，那么对它递归进行观察
    if (inserted) ob.observeArray(inserted)
    // 通知依赖更新
    ob.notify()
    return result
  })
})

逻辑很简单，就是当调用了这些方法更新数组后观察新插入的数据，以及通知更新，这里是调用观察对象ob的更新方法notify：

p.notify = function () {
  var deps = this.deps
  for (var i = 0, l = deps.length; i < l; i++) {
    deps[i].notify()
  }
}

通过上面的convert方法我们知道这个deps数组里收集的是该属性值对应的属性的依赖收集实例dep，有点绕：

{
    data: {
        a: [1, 2, 3],
        b: {
            c: [4, 5, 6]
        }
    }
}

比如这个例子，忽略b的话，一共存在两个Observer实例，一个是属性data的值的，另一个是 [1, 2, 3]的， [1, 2, 3]的Observer实例的deps数组收集了a的dep，我们使用上述数组的方法更新了这个数组，会通知a的dep进行更新通知，这很容易理解，如果我们给a设置了新值，比如：data.a = 2是会触发a的setter的，里面会调用a的dep的notify方法，只是现在这个a的值变成了数组，数组变化了就相当于a变化了，但问题是数组变化并不会触发a的setter，所以就只能手动去调用a的dep的更新方法去通知a的依赖也去更新，但是，比如c的数组变化了，会通知c的依赖更新，但是不会向上再去通知b的依赖更新。

数组的原型方法修改完后就需要去遍历该数组的元素进行观察：

p.observeArray = function (items) {
  var i = items.length
  while (i--) {
    this.observe(items[i])
  }
}

很简单，遍历数组调用observe方法。

到这里，就完成了对data上所有数据的观察了，总结一下，从data对象开始，给该对象创建一个观察实例，然后遍历它的子属性，值是数组或对象的话又创建对应的观察实例，然后再继续遍历它们的子属性，继续递归，直到把每个属性都转换成getter和setter。

在第一次渲染的时候会引用用到的值，也就是会触发对应属性的getter，引用前会把对应的watcher赋值到Observer.target属性，javascript代码执行是单线程的，所以同一时刻只会有一个Observer.target，所以只要某个属性的getter里获取到了此刻的Observer.target，那一定代表该watcher是依赖该属性的，那么就添加到该属性的依赖收集对象dep里，这里巧妙的使用闭包来保存每个属性的dep实例，后续如果该属性值变化了，那么会触发setter，如果新赋值是对象或数组又会递归进行观察，最后再通知该属性的所有依赖进行更新。

上面一直都提到了这个dep，现在来看一下：

function Dep () {
  this.id = ++uid
  this.subs = []
}
var p = Dep.prototype
p.addSub = function (sub) {
  this.subs.push(sub)
}
p.removeSub = function (sub) {
  if (this.subs.length) {
    var i = this.subs.indexOf(sub)
    if (i > -1) this.subs.splice(i, 1)
  }
}
p.notify = function () {
  var subs = _.toArray(this.subs)
  for (var i = 0, l = subs.length; i < l; i++) {
    subs[i].update()
  }
}

这个类很简单，这就是全部代码，功能是收集订阅者、删除订阅者以及遍历调用订阅者的update方法。

最后看一下修改数组和对象的辅助方法，如：$set、$remove等。

对于数组，直接使用索引设置数组项vue是不能检测到的，所以提供了$set方法：

_.define(
  arrayProto,
  \'$set\',
  function $set (index, val) {
    if (index >= this.length) {
      this.length = index + 1
    }
    return this.splice(index, 1, val)[0]
  }
)

给数组的原型上添加了$set方法，调用splice方法来设置值，这个方法由于已经被重写过了，所以可以触发更新，我们完全可以直接使用splice方法。

对于对象，在data初始化后在添加新属性也是不能检测到的，在0.11版本提供各了$add方法：

_.define(
  objProto,
  \'$add\',
  function $add (key, val) {
    if (this.hasOwnProperty(key)) return
    var ob = this.__ob__
    if (!ob || _.isReserved(key)) {
      this[key] = val
      return
    }
    ob.convert(key, val)
    if (ob.vms) {
      var i = ob.vms.length
      while (i--) {
        var vm = ob.vms[i]
        vm._proxy(key)
        vm._digest()
      }
    } else {
      ob.notify()
    }
  }
)

直接调用convert方法就可以了，设置完得通知更新，这里分了两种情况，如果设置的是data的根属性，那么需要把该属性代理到vue实例上，另外需要通知该实例及其所有子实例的watcher进行强制更新。如果不是根属性，那么调用所在对象的观察者实例的notify方法，通知对象对应的属性的订阅者进行更新。

数据观察到这里就结束了，但是现在还不知道，依赖到底是什么时候才进行收集的，Observer.target到底什么时候才会被赋值，如果数据更新了，watcher是什么，watcher又是怎么触发DOM更新以及怎么更新，问题还有很多，咱们下回再见。