vue源码阅读之Observer

我们上次学习了vue数据驱动的概念，以及简单的vue怎么知道数据更新，然后采取行动的。今天我们就来继续深入学习，vue怎么把数据和视图给绑定在一起的，数据发生变化，视图怎么会自动发生变化的。

vue中的Observer

之前讲了vue知道数据发生变化利用了Object.defineProperty函数，那么对于vue中定义的数据它是怎么把所有的数据给监听到呢。

这里就是Observer类做的事情，他会通过递归的方式把一个对象的所有属性都转化为可观测的对象。

首先Observer是一个类。

constructor (value: any) {
    this.value = value
    this.dep = new Dep()
    this.vmCount = 0
    def(value, '__ob__', this)
    if (Array.isArray(value)) {
      if (hasProto) {
        protoAugment(value, arrayMethods)
      } else {
        copyAugment(value, arrayMethods, arrayKeys)
      }
      this.observeArray(value)
    } else {
      this.walk(value)
    }
  }

有它的构造函数，每个要监听的属性值都会有自己的dep， this.dep = new Dep()也就是收集依赖存放的地方，然后为每个value定义了一个__ob__属性，它的值就是该Observer实例。这样就是为它打上标记，表示已经转化为响应式了，避免重复操作。

对于数组的响应式需要单独处理if (Array.isArray(value))，否则就是对象，采用this.walk(value)进行处理。

我们先看Object的情况walk怎么处理的

walk函数的实现

walk就是遍历完Object的所有的属性，把每个属性都转换成getter/setter的形式来侦测变化。

 walk (obj: Object) {
    const keys = Object.keys(obj)
    for (let i = 0; i < keys.length; i++) {
      defineReactive(obj, keys[i])
    }
  }

这是walk的实现，就是在遍历Object的每个属性，然后调用defineReactive函数来操作。如果传入的属性值还是一个Object的时候，会使用new Observer(val)来递归。

export function observe (value: any, asRootData: ?boolean): Observer | void {
  if (!isObject(value) || value instanceof VNode) {
    return
  }

在这段代码中实现的。