这里的英文注释非常清晰，就是为了给该对象新建一个观察者类，如果存在则返回已存在的（比如互相引用或依赖重复），可以看到这个观察者列表放置在对象的__ob__属性下。下面我们看下这个Observer观察者类：
/** * Observer class that are attached to each observed * object. Once attached, the observer converts target * object's property keys into getter/setters that * collect dependencies and dispatches updates. */ var Observer = function Observer (value) { this.value = value; this.dep = new Dep(); this.vmCount = 0; // def函数是defineProperty的简单封装 def(value, '__ob__', this); if (Array.isArray(value)) { // 在es5及更低版本的js里，无法完美继承数组，这里检测并选取合适的函数 // protoAugment函数使用原型链继承，copyAugment函数使用原型链定义（即对每个数组defineProperty） var augment = hasProto ? protoAugment : copyAugment; augment(value, arrayMethods, arrayKeys); this.observeArray(value); } else { this.walk(value); } };
在Observer类的注释里也清楚的说明，它会被关联到每一个被检测的对象，使用getter/setter修改其默认读写，用于收集依赖和发布更新。其中出现了三个我们需要关心的东西Dep类/observeArray/walk，我们先看observeArray的源码：
/** * Observe a list of Array items. */ Observer.prototype.observeArray = function observeArray (items) { for (var i = 0, l = items.length; i < l; i++) { observe(items[i]); } };
它不过是在Observer类和observe方法中间的一层递归，因为我们观察的只能是对象，而不能是数字、字符串或者数组（数组的观察比较特殊，事实上是重构了方法来触发更新，后面会讲到）。那我们接下来看下Dep类是做什么用的：
/** * A dep is an observable that can have multiple * directives subscribing to it. */ var Dep = function Dep () { this.id = uid$1++; this.subs = []; };
注释里告诉我们Dep类是一个会被多个指令订阅的可被观察的对象，这里的指令就是我们在html代码里书写的东西，如:class={active: hasActive}或{{ count }} {{ count * price }} ，而他们就会订阅hasActive/count/price这些对象，而这些订阅他们的对象就会被放置在Dep.subs列表中。每一次新建Dep对象，就会全局uid递增，然后传给该Dep对象，保证唯一性id。
我们接着看刚才的walk函数做了什么：
/** * Walk through each property and convert them into * getter/setters. This method should only be called when * value type is Object. */ Observer.prototype.walk = function walk (obj) { var keys = Object.keys(obj); for (var i = 0; i < keys.length; i++) { defineReactive$$1(obj, keys[i], obj[keys[i]]); } };
看来和名字一样，它只是走了一遍，那我们来看下defineReactive$$1做了什么：
/** * Define a reactive property on an Object. */ function defineReactive$$1 (obj, key, val, customSetter) { var dep = new Dep(); var property = Object.getOwnPropertyDescriptor(obj, key); if (property && property.configurable === false) { return } // cater for pre-defined getter/setters var getter = property && property.get; var setter = property && property.set; var childOb = observe(val); Object.defineProperty(obj, key, { enumerable: true, configurable: true, get: function reactiveGetter () { var value = getter ? getter.call(obj) : val; if (Dep.target) { dep.depend(); if (childOb) { childOb.dep.depend(); } if (Array.isArray(value)) { dependArray(value); } } return value }, set: function reactiveSetter (newVal) { var value = getter ? getter.call(obj) : val; // 脏检查，排除了NaN !== NaN的影响 if (newVal === value || (newVal !== newVal && value !== value)) { return } if (setter) { setter.call(obj, newVal); } else { val = newVal; } childOb = observe(newVal); dep.notify(); } }); }
终于找到重头戏了，这里真正使用了getter/setter代理了对象的默认读写。我们首先新建一个Dep对象，利用闭包准备收集依赖，然后我们使用observe观察该对象，注意此时与上面相比少了一个asRootData = true的参数。
我们先来看取值的代理get，这里用到了Dep.target属性和depend()方法，我们来看看它是做什么的：
// the current target watcher being evaluated. // this is globally unique because there could be only one // watcher being evaluated at any time. Dep.target = null; Dep.prototype.depend = function depend () { if (Dep.target) { Dep.target.addDep(this); } }; Dep.prototype.notify = function notify () { // stablize the subscriber list first var subs = this.subs.slice(); for (var i = 0, l = subs.length; i < l; i++) { subs[i].update(); } };