vue源码阅读之Observer

大家好，欢迎来到IT知识分享网。

我们上次学习了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 } 

在这段代码中实现的。