Vue源码解读一：Vue数据响应式原理

这方面的文章很多，但是我感觉很多写的比较抽象，本文会通过举例更详细的解释。（此文面向的Vue新手们，如果你是个大牛，看到这篇文章就可以点个赞，关掉页面了。）通过阅读这篇文章，你将了解到：
1.Vue数据响应式的设计思想
2.了解Observer,Dep,Watcher的源码实现原理
3.getter/setter 拦截数据方式的不足及解决方案

一、设计模式

Vue 采用数据劫持结合发布者-订阅者模式的方式来实现数据的响应式，通过Object.defineProperty(点我查看该属性)来劫持数据的setter，getter，在数据变动时发布消息给订阅者，订阅者收到消息后进行相应的处理。
现在我们来看一下下面的图，共涉及5个概念，data和view的意义很明显，主要讲解Observer,Dep和Watcher。
Observer：数据的观察者,让数据对象的读写操作都处于自己的监管之下。当初始化实例的时候，会递归遍历data，用Object.defineProperty来拦截数据（包含数组里的每个数据）。
Dep：数据更新的发布者，get数据的时候，收集订阅者，触发Watcher的依赖收集；set数据时发布更新，通知Watcher 。
Watcher：数据更新的订阅者，订阅的数据改变时执行相应的回调函数（更新视图或表达式的值）。
一个Watcher可以更新视图，如html模板中用到的{{test}}，也可以执行一个$watch监督的表达式的回调函数（Vue实例中的watch项底层是调用的$watch实现的）,还可以更新一个计算属性（即Vue实例中的computed项）。
图中红色的箭头表示的是收集依赖时获取数据的流程。Watcher会收集依赖的时候（这个时机可能是实例创建时，解析模板、初始化watch、初始化computed，也可能是数据改变后，Watcher执行回调函数前），会获取数据的值，此时Observer会拦截数据（即调用get函数），然后通知Dep可以收集订阅者啦。Dep将订阅数据的Watcher保存下来,便于后面通知更新。
图中绿色的箭头表示的是数据改变时，发布更新的流程。当数据改变时，即设置数据时，此时Observer会拦截数据（即调用set函数），然后通知Dep，数据改变了，此时Dep通知Watcher，可以更新视图啦。

二、 代码实现

Observer

下图是Observer类的结构
我们先来看看Observer的实现（大家看代码的时候可以注意下引文的注释，英文的注释是官方的，说的很棒。中文注释是我加的）

/**
* Attempt to create an observer instance for a value,
* returns the new observer if successfully observed,
* or the existing observer if the value already has one.
(observer实例的生成函数，如果数据没有被observe过，那么新建一个observer类并返回，否则直接返回observer类)
*/
function observe (value, asRootData) {
if (!isObject(value)) {
return
}
var ob;
//如果存在__ob__属性，说明该对象没被observe过，不是observer类
if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
ob = value.__ob__;
} else if (
observerState.shouldConvert &&
!isServerRendering() &&
(Array.isArray(value) || isPlainObject(value)) &&
Object.isExtensible(value) &&
!value._isVue
) {
//如果数据没有被observe过，且数据是array或object类型，那么将数据转化为observer类型，所以observer类接收的是对象和数组。
ob = new Observer(value);
}
//如果是RootData，即咱们在新建Vue实例时，传到data里的值，只有RootData在每次observe的时候，会进行计数。
vmCount是用来记录此Vue实例被使用的次数的，
比如，我们有一个组件logo，页面头部和尾部都需要展示logo，都用了这个组件，那么这个时候vmCount就会计数，值为2
if (asRootData && ob) {
ob.vmCount++;
}
return ob
}
//下面是oberver类
/**
* 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是定义的函数，使用Object.defineProperty()给value添加不可枚举的属性,__ob__是一个对象被observe的标志。
我们在开发的过程中，有时会遇到，数据改变但视图没有更新的问题。
这个时候，你可以log一下，看看该对象是否有__ob__属性来判断该对象是不是被observe了，如果没有，那么数据改变后视图是不可能更新的。
def(value, '__ob__', this);
//数组特殊处理，下面详细讲解
if (Array.isArray(value)) {
var augment = hasProto
? protoAugment
: copyAugment;
augment(value, arrayMethods, arrayKeys);
this.observeArray(value);
} else {
//对于对象，遍历对象，并用Object.defineProperty转化为getter/setter，便于监控数据的get和set
this.walk(value);
}
};

//遍历对象，调用defineReactive将每个属性转化为getter/setter
/**
* 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]]);
}
};

/**
* Observe a list of Array items.
*/
//observe每个数组元素(observe会生成Observer类)
Observer.prototype.observeArray = function observeArray (items) {
for (var i = 0, l = items.length; i < l; i++) {
observe(items[i]);
}
};
/**
* Define a reactive property on an Object.
*/
function defineReactive$$1 (
obj,
key,
val,
customSetter
) {
//实例化一个Dep，这个Dep存在在下面的get和set函数的作用域中，用于收集订阅数据更新的Watcher。这里一个Dep与一个属性（即参数里的key）相对应，一个Dep可以有多个订阅者。
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;
//注意下面这行代码，设置getter/setter之前，会observe该属性对应的值（val）。
比如此时参数传入的obj是{ objKey: { objValueKey1:{ objValueKey2: objValueValue2 } } },
key是objKey，
val是{ objValueKey1:{ objValueKey2: objValueValue2 } }，
那么这个时候{ objValueKey1:{ objValueKey2: objValueValue2 } }对象也会被observe到，在observe该对象的时候，{ objValueKey2: objValueValue2 }也会被observe到。
以此类推，不管对象的结构有多深都会被observe到。
var childOb = observe(val);
//设置getter/setter
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function reactiveGetter () {
//获取属性的值，如果这个属性在转化之前定义过getter，那么调用该getter得到value的值，否则直接返回val。
var value = getter ? getter.call(obj) : val;
注意这里，这里是Dep收集订阅者的过程，只有在Dep.target存在的情况下才进行这个操作，在Watcher收集依赖的时候才会设置Dep.target，所以Watcher收集依赖的时机就是Dep收集订阅者的时机。
调用get的情况有两种，一是Watcher收集依赖的时候（此时Dep收集订阅者），二是模板或js代码里用到这个值，这个时候是不需要收集依赖的，只要返回值就可以了。
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;
/* eslint-disable no-self-compare */
if (newVal === value || (newVal !== newVal && value !== value)) {
return
}
/* eslint-enable no-self-compare */
if ("development" !== 'production' && customSetter) {
customSetter();
}
if (setter) {
setter.call(obj, newVal);
} else {
val = newVal;
}
//当为属性设置了新的值，是需要observe的
childOb = observe(newVal);
//set的时候数据变化了，通知更新数据
dep.notify();
}
});
}

/**
* Collect dependencies on array elements when the array is touched, since
* we cannot intercept array element access like property getters.
*/
function dependArray (value) {
for (var e = (void 0), i = 0, l = value.length; i < l; i++) {
e = value[i];
//在调用这个函数的时候，数组已经被observe过了，且会递归observe。(看上面defineReactive函数里的这行代码：var childOb = observe(val);)
所以正常情况下都会存在__ob__属性，这个时候就可以调用dep添加依赖了。
e && e.__ob__ && e.__ob__.dep.depend();
if (Array.isArray(e)) {
dependArray(e);
}
}
}

我们关注以下几点：

1.Observer类中的属性和方法都比较好理解，我在这里只说一下vmCount属性：
vmCount属性是用来记录该实例被创建的次数，我们看下面的代码（戳我查看demo源码及效果），调用了两次my-component组件，这个时候vmCount为2.

<div >
<div id="example">
<my-component></my-component>
<my-component></my-component>
</div>
</div>
<script src="./vue.js"></script>
<script>
var data = { counter: 1 }
Vue.component('my-component', {
template: '<div>{{ counter }}</div>',
data: function () {
return data
}
})
// 创建根实例
var app2 = new Vue({
el: '#example'
})
</script>

效果：

getter/setter方法拦截数据的不足：

当对象增删的时候，是监控不到的。比如：data={a:"a"},这个时候如果我们设置data.test="test",这个时候是监控不到的。因为在observe data的时候，会遍历已有的每个属性（比如a），添加getter/setter，而后面设置的test属性并没有机会设置getter/setter，所以检测不到变化。同样的，删除对象属性的时候，getter/setter会跟着属性一起被删除掉，拦截不到变化。
getter/setter是针对对象的，那么对于数组的修改，怎样监控变化呢
每次给数据设置值得时候，都会调用setter函数，这个时候就会发布属性更新消息，即使数据的值没有变。从性能方便考虑我们肯定希望值没有变化的时候，不更新模板。
对于第一个问题，Vue官方给出了vm.$set/Vue.set和vm.$delete/Vue.delete这样的api来解决这个问题。我们来看下$set的代码：

/**
* Set a property on an object. Adds the new property and
* triggers change notification if the property doesn't
* already exist.
*/
function set (target, key, val) {
//对于数组的处理，调用变异方法splice，这个时候数组的Dep会发布更新消息
if (Array.isArray(target) && isValidArrayIndex(key)) {
target.length = Math.max(target.length, key);
target.splice(key, 1, val);
return val
}
//如果set的是对象已经有的属性，那么该属性已经有getter/setter函数了，此时直接修改即可
if (hasOwn(target, key)) {
target[key] = val;
return val
}
var ob = (target).__ob__;
if (target._isVue || (ob && ob.vmCount)) {
"development" !== 'production' && warn(
'Avoid adding reactive properties to a Vue instance or its root $data ' +
'at runtime - declare it upfront in the data option.'
);
return val
}
if (!ob) {
target[key] = val;
return val
}
//如果是对象没有的属性，则添加getter/setter
defineReactive$$1(ob.value, key, val);
//注意此处，对象的Dep会发布更新
ob.dep.notify();
return val
}

上面的代码比较简单，看过注释应该就能明白，我不做过多解释。我们着重注意下这句代码：ob.dep.notify()，对象的Dep发布更新。可是这个dep是在什么地方收集的订阅者呢？
还记得defineReactive函数里让大家注意的这句代码吗：childOb.dep.depend(),这句代码就是在收集订阅者。
仔细阅读Observer相关的代码，我们会发现，dep实例化的地方有两处：
一处是在defineReactive函数里，每次调用这个函数的时候都会创建一个新的Dep实例，存在在getter/setter闭包函数的作用域链上，是为对象属性服务的。在Watcher获取属性的值的时候收集订阅者，在设置属性值的时候发布更新。
另一处是在observe函数中，此时的dep挂在被observe的数据的__ obj__属性上，他是为对象或数组服务的，在Watcher获取属性的值的时候，如果值被observe后返回observer对象（对象和数组才会返回observer），那么就会在此时收集订阅者，在对象或数组增删元素时调用$set等api时发布更新的；
defineReactive函数的getter函数里这段代码就是在收集订阅者：

get: function reactiveGetter () {
var value = getter ? getter.call(obj) : val;
if (Dep.target) {
dep.depend();
if (childOb) {
//注意这里，此处的dep就是在执行var childOb = observe(val)时产生的，是用来收集childOb的订阅者的
childOb.dep.depend();
}
if (Array.isArray(value)) {
dependArray(value);
}
}

我们来看个例子，data={testkey:{testValueKey:testValueValue}}，这个时候模板里有{{testkey}}，模板的Watcher在执行getter函数的时候，testkey属性的getter对应的dep会将此Watcher收集为订阅者；同时{testValueKey:testValueValue}对象也会将此Watcher收集为订阅者（我们在给testkey属性设置getter/setter函数时，会执行var childOb = observe(val)和childOb.dep.depend()，而此时的val就是{testValueKey:testValueValue}对象）。
在这个时候我们设置this.$set(this.testkey, "addKey", "addValue")，就会触发this.testkey对应的值：{testValueKey:testValueValue}对象的dep发布更新，而此时dep的订阅者中包含模板{{testkey}}的watcher,此时模板更新视图。同理每个数组也是有相应的dep来发布更新的，比如data={arr:[1,2,2]}}，此时[1,2,2]这个数组的__ obj__属性下也会有dep的。
其实只有对象和数组才会有这种删除和增加的操作，而其他的字符串等都是直接赋值修改的，getter/setter都是能检测到的，所以observe对象和数组的时候会创建一个dep，用来收集订阅和发布更新
对于第二个问题，我们先来考虑下数组修改有哪几种情况
1.当你利用索引直接设置一个项时
比如：data={arr:[1,2,3]}，这个时候我设置this.arr[0] = 4,会发现数据改变了，但是视图没有更新，Vue根本没有检测到变化。
这个时候可能你会说，observeArray的时候不是会遍历数组，observe每个元素吗？可是Observe数据的时候是会判断数据类型的，只会处理数组和对象，而this.arr里面的元素是字符串，所以无法转化成observer类，也就不会有getter/setter。另一方面，即便arr里面是对象，比如{arr:[{testobj: true}]}，数组元素{testobj: true}会被observe到，那也只是在{testobj: true}对象里面的属性改变的时候响应，而{testobj: true}对象被替换是无法感知的。
2.调用数组的变异方法(push(),pop(),shift(),unshift(),splice(),sort(),reverse())，这些方法是会让数组的值发生改变的，比如：arr=[0,1];arr.puah(3);此时arr=[1,2,3]，arr发生了改变，此时是需要更新视图的，但是arr的getter/setter拦截不到变化（只有在赋值的时候才会调用setter，比如：arr=[6,7,8]）。
3.当你修改数组的长度时，例如：vm.items.length = newLength
对于第一种情况，和对象的增减一样，可以使用vm.$set/Vue.set和vm.$delete/Vue.delete这几个api.
对于第二种情况，可以通过改写这些变异方法完成，在调用这些方法的时候发布更新消息。下面我们来看代码

/*
* not type checking this file because flow doesn't play well with
* dynamically accessing methods on Array prototype
*/

var arrayProto = Array.prototype;
var arrayMethods = Object.create(arrayProto);
//遍历变异方法

[
'push',
'pop',
'shift',
'unshift',
'splice',
'sort',
'reverse'
]
.forEach(function (method) {
// cache original method
var original = arrayProto[method];
//重写arrayMethods里的变异方法
def(arrayMethods, method, function mutator () {
var args = [], len = arguments.length;
while ( len-- ) args[ len ] = arguments[ len ];

var result = original.apply(this, args);
var ob = this.__ob__;
var inserted;
switch (method) {
case 'push':
case 'unshift':
inserted = args;
break
case 'splice':
inserted = args.slice(2);
break
}
//inserted存储的是新加到数组里的元素，需要被observe
if (inserted) { ob.observeArray(inserted); }
// notify change
//发布更新
ob.dep.notify();
return result
});
});

回过头再看Observer类中对于数组的处理，先覆盖变异数组，再observe每个数组元素。所以每当调用数组的变异方法的时候，都会更新视图。

if (Array.isArray(value)) {
var augment = hasProto
? protoAugment
: copyAugment;
//用改变变异数组后的arrayMethods的方法覆盖被observe的数组的方法
augment(value, arrayMethods, arrayKeys);
this.observeArray(value);
}

对于第三种情况，可以使用splice来完成，splice是变异方法，会发布更新。
戳这，查看官网对此的解决方案。
对于上面提到的第三个问题，Watcher在run方法里解决了这个问题，他会检测value !== this.value，只更新值变化的情况。
Observer相关代码就看到这里，下面来看Dep

Dep

下图是Dep的结构图
下面是源码：

//全局变量，每个实例中的dep实例的id都是从0开始累加的
var uid$1 = 0;

/**
* A dep is an observable that can have multiple
* directives subscribing to it.
*/
var Dep = function Dep () {
this.id = uid$1++;
//subscribe的简写，存放订阅者
this.subs = [];
};
//添加一个订阅者
Dep.prototype.addSub = function addSub (sub) {
this.subs.push(sub);
};
//删除一个订阅者
Dep.prototype.removeSub = function removeSub (sub) {
remove$1(this.subs, sub);
};
//让Watcher收集依赖并添加订阅者。
Dep.target是一个Watcher, 可以查看Watcher的addDep方法。
这个方法做的事情是：收集依赖后，调用了Dep的addSub方法，给Dep添加了一个订阅者
Dep.prototype.depend = function depend () {
if (Dep.target) {
Dep.target.addDep(this);
}
};
//发布数据更新：通过调用subs里面的每个Watcher的update发布更新
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();
}
};

// the current target watcher being evaluated.
// this is globally unique because there could be only one
// watcher being evaluated at any time.
//注意这里，target是全局唯一的。下面详细讲解。
Dep.target = null;

关于Dep主要注意以下几点：

1.Dep是发布订阅者模型中的发布者，Watcher是观察者，一个Dep实例对应一个对象属性或一个被观察的对象，用来收集订阅者和在数据改变时，发布更新。
2.Dep实例有两种实例：
*第一种：在observe方法里生成的，用来给被观察的对象收集订阅者和发布更新，挂在对象的__ ob__对象上，通常在defineReactive函数里的getter函数里调用childOb.dep.depend()来收集依赖，在vm.$set/Vue.set和vm.$delete/Vue.delete这些api中调用来发布更新。
*第二种：在defineReactive函数里，是用来set/get数据时收集订阅者和发布更新的，保存在getter/setter闭包函数的作用域上。set数据时收集依赖，get数据时发布更新。
比如我们有一个data:data={testVal: "testVal", testObj: {testObjFirstEle: "testObjFirstEle"}};
这个时候，这个Vue实例上会有四个Dep实例：
第一个是调用data的observe方法时生成的挂在{testVal: "testVal", testObj: {testObjFirstEle: "testObjFirstEle"}}对象的__ ob__方法上的，属于上面说的第一种实例；
第二个是调用defineReactive函数给属性testVal添加getter,setter函数时生成的。保存在getter/setter闭包函数的作用域上，属于第二种实例。
第三个是调用defineReactive函数给属性testObj添加getter,setter函数时生成的。保存在getter/setter闭包函数的作用域上，属于第二种实例。
第四种是Watcher收集依赖时，调用testObj属性的set函数添加依赖时observe属性的值（即{testObjFirstEle: "testObjFirstEle"}对象）生成的。
现在我们来验证一下：
*源码：http://runjs.cn/code/9p5ydg84
*效果：http://sandbox.runjs.cn/show/9p5ydg84
dep的id从0开始，到3结束一共四个。这个时候你可能会问，dep的id为2和3的实例去哪里了？注意上面我们说的第二种Dep实例对存在在getter/setter闭包函数的作用域中的，我们获取不到，你可以在源码里debugger来看。
3.当我们想要给{testObjFirstEle: "testObjFirstEle"}对象添加属性并更新视图时有两种方式：
一、利用getter/setter，重新设置testObj属性的值，testObj属性的setter执行的过程中会调用dep.notify（）发布更新。比如：this.testObj = {testObjFirstEle: "testObjFirstEle", "newEle": "newEle};
二、利用$set函数：this.$set(this.testObj, "newEle", "newEle")。此时是{testObjFirstEle: "testObjFirstEle"}对象的__obj __对象上的dep发布的更新。
4.Dep.target：Dep.target为什么是全局唯一的呢？这是我以前一直不理解的地方。这一点我想，在讲完Watcher时会更清晰，所以请大家耐心读完下面的内容，就明白了。

Watcher

Watcher里面的属性很多，我们下面只注释本文关心的内容

/**
* A watcher parses an expression, collects dependencies,
* and fires callback when the expression value changes.
* This is used for both the $watch() api and directives.
*/
var Watcher = function Watcher (
vm,
expOrFn,
cb,
options
) {
this.vm = vm;
vm._watchers.push(this);
// options
if (options) {
//对应$watch参数的deep，具体的可以参考官网文档:https://cn.vuejs.org/v2/api/#vm-watch
this.deep = !!options.deep;
this.user = !!options.user;
//跟computed相关，这里不具体讲解
this.lazy = !!options.lazy;
this.sync = !!options.sync;
} else {
this.deep = this.user = this.lazy = this.sync = false;
}
this.cb = cb;
this.id = ++uid$2; // uid for batching
this.active = true;
this.dirty = this.lazy; // for lazy watchers
//注意这里，关于deps和newDeps下面详细讲解
this.deps = [];
this.newDeps = [];
this.depIds = new _Set();
this.newDepIds = new _Set();
this.expression = expOrFn.toString();
// parse expression for getter
//这里的getter会有两种情况：
一、一个函数，比如在生命周期mount的时候，需要watch模板中的值，这个时候传过来的是一个函数，后面在get函数里调用时这个函数时，这个函数会调用数据的getter函数。
二、一个表达式，比如我们在Vue实例的watch中写的表达式，后面在get函数里获取表达式的值的时候会调用数据的getter函数。
expOrFn参数是一个字符串，比如testObj.testObjFirstVal，此时testObj仅仅是一个字符串，而不是对象，我们无法直接获取testObjFirstVal属性的值。
所以我们在获取值得时候不能直接拿到值，parsePath函数就是用来解决这个问题的，这个函数具体的操作，在后面的代码里。
if (typeof expOrFn === 'function') {
this.getter = expOrFn;
} else {
//这里是针对表达式
this.getter = parsePath(expOrFn);
if (!this.getter) {
this.getter = function () {};
"development" !== 'production' && warn(
"Failed watching path: \"" + expOrFn + "\" " +
'Watcher only accepts simple dot-delimited paths. ' +
'For full control, use a function instead.',
vm
);
}
}
//注意这个地方，在非computed调用Watch函数外，都会调用get函数（computed有自己的逻辑）
this.value = this.lazy
? undefined
: this.get();
};

/**
* Evaluate the getter, and re-collect dependencies.
*/
//get函数，用来收集依赖和获取数据的值
Watcher.prototype.get = function get () {
pushTarget(this);
var value;
var vm = this.vm;
try {
value = this.getter.call(vm, vm);
} catch (e) {
if (this.user) {
handleError(e, vm, ("getter for watcher \"" + (this.expression) + "\""));
} else {
throw e
}
} finally {
// "touch" every property so they are all tracked as
// dependencies for deep watching
if (this.deep) {
traverse(value);
}
popTarget();
//注意这里下面详细讲解
this.cleanupDeps();
}
return value
};

// 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;
var targetStack = [];

function pushTarget (_target) {
if (Dep.target) { targetStack.push(Dep.target); }
Dep.target = _target;
}

function popTarget () {
Dep.target = targetStack.pop();
}

/**
* Add a dependency to this directive.
*/
//添加一个依赖
Watcher.prototype.addDep = function addDep (dep) {
var id = dep.id;
if (!this.newDepIds.has(id)) {
this.newDepIds.add(id);
this.newDeps.push(dep);
//这里做了一个去重，如果depIds里包含这个id，说明在之前给depIds添加这个id的时候，已经调用过 dep.addSub(this)，即添加过订阅，不需要重复添加。
if (!this.depIds.has(id)) {
dep.addSub(this);
}
}
};

/**
* Clean up for dependency collection.
*/
//下面详细讲
Watcher.prototype.cleanupDeps = function cleanupDeps () {
var this$1 = this;

var i = this.deps.length;
//去除多余的订阅者
while (i--) {
var dep = this$1.deps[i];
//如果Watcher不依赖于某个数据，即某个Dep,那么不需要再订阅这个数据的消息。
if (!this$1.newDepIds.has(dep.id)) {
dep.removeSub(this$1);
}
}
var tmp = this.depIds;
//更新depIds
this.depIds = this.newDepIds;
this.newDepIds = tmp;
//清空newDepIds
this.newDepIds.clear();
tmp = this.deps;
//更新deps
this.deps = this.newDeps;
this.newDeps = tmp;
//清空newDeps
this.newDeps.length = 0;
};

/**
* Subscriber interface.
* Will be called when a dependency changes.
*/
//更新模板或表达式：调用run方法
Watcher.prototype.update = function update () {
/* istanbul ignore else */
//下面三种情况均会调用run方法
if (this.lazy) {
this.dirty = true;
} else if (this.sync) {
this.run();
} else {
//queueWatcher这个函数最终会调用run方法。
queueWatcher(this);
}
};

/**
* Scheduler job interface.
* Will be called by the scheduler.
*/
//注意这里调用了get方法，会更新模板，且重新收集依赖
Watcher.prototype.run = function run () {
if (this.active) {
//获取值，且重新收集依赖
var value = this.get();
if (
value !== this.value ||
// Deep watchers and watchers on Object/Arrays should fire even
// when the value is the same, because the value may
// have mutated.
isObject(value) ||
this.deep
) {
// set new value
var oldValue = this.value;
this.value = value;
//注意下面 this.cb.call，调用回调函数来更新模板或表达式的值（$watch表达式的时候，会更新表达式的值）
if (this.user) {
try {
this.cb.call(this.vm, value, oldValue);
} catch (e) {
handleError(e, this.vm, ("callback for watcher \"" + (this.expression) + "\""));
}
} else {
this.cb.call(this.vm, value, oldValue);
}
}
}
};

/**
* Parse simple path.
*/
var bailRE = /[^w.$]/;
function parsePath (path) {
//如果字符串中没有符号"."，直接返回即可，比如：testVal
if (bailRE.test(path)) {
return
}
//用符号"."分割字符串，遍历数组，依次获取obj对象上相应的值。
比如：testObj.testObjFirstVal，先分割成数组[testObj,testObjFirstVal],其次遍历数组，获取obj[testObj]的值，最后获取obj[testObj][testObjFirstVal]的值。
var segments = path.split('.');
//这个地方将函数作为返回值，感兴趣的话，可以看一下函数式编程
return function (obj) {
for (var i = 0; i < segments.length; i++) {
if (!obj) { return }
obj = obj[segments[i]];
}
return obj
}
}

我们先来理一理watch函数做的事情：初始化变量——>获取getter函数，这里的getter函数是用来获取数据的值，函数执行过程中会调用数据的getter函数，会收集依赖——>调用watcher的get方法，收集依赖，获取值，并将这些东西记录下来。
这个过程就完成了收集依赖的过程，而update函数是用来接收数据发布更新的消息并更新模板或表达式的。
下面我们重点来关注这几点，这些是我刚接触Vue时想不清楚的地方：
1.收集依赖指的是谁收集依赖，依赖又是指的什么？这是我一直很迷惑的问题。看英文注释：Watcher的作用是分割表达式，收集依赖并且在值变化的时候调用回调函数。那么我们很明确知道是Watcher在收集依赖，依赖到底指什么呢？
我们上面说过一个Dep对应着一个数据（这个数据可能是：对象的属性、一个对象、一个数组）;一个Watcher对应可以是一个模板也可以是一个$watch对应的表达式、函数等，无论那种情况，他们都依赖于data里面的数据，所以这里说的依赖其实就是模板或表达式所依赖的数据，对应着相关数据的Dep。
举个例子：下面这个$watch对应的函数依赖的数据就是testWatcher和testVal。所以这个$watch对应的Watcher收集的依赖就是testWatcher和testVal对应的Dep。

app.$watch(function(){
return this.testWatcher + this.testVal;
},function(newVal){
console.log(newVal
})

2.Watcher有四个使用的场景，只有在这四种场景中，Watcher才会收集依赖，更新模板或表达式，否则，数据改变后，无法通知依赖这个数据的模板或表达式：
*第一种：观察模板中的数据
*第二种：观察创建Vue实例时watch选项里的数据
*第三种：观察创建Vue实例时computed选项里的数据所依赖的数据
*第四种：调用$watch api观察的数据或表达式
所以在解决数据改变，模板或表达式没有改变的问题时，可以这么做：
首先仔细看一看数据是否在上述四种应用场景中，以便确认数据已经收集依赖；其次查看改变数据的方式，确定这种方式会使数据的改变被拦截(关于这一点，上面Obsever相关内容中说的比较多)。
3.Dep.target的作用：我们前面说过收集依赖的时机是在调用数据的getter函数的时候，但是在这个时候数据的getter函数不知道当前的Watcher是哪一个，所以这里使用了一个全局变量来记录当前的Watcher，方便添加依赖到正在执行的Watcher。关于这点官方的英文注释写的挺清楚的。
4.targetStack的作用（Watcher函数的get方法中pushTarget和popTarget方法中用到）：Vue2 中(本文源码为Vue2)，视图被抽象为一个 render 函数，一个 render 函数只会生成一个 watcher。比如我们有如下一个模板，模板中使用了Header组件。Vue2 中组件数的结构在视图渲染时就映射为 render 函数的嵌套调用，有嵌套调用就会有调用栈。当 render模板时，遇到Header组件会调用Header组件的render函数，两个render函数依次入栈，执行完函数，依次出栈。

<div id="app">
<Header></Header>
</div>

5.Watcher函数的get方法中调用this.getter.call(vm, vm)收集完依赖后，又调用this.cleanupDeps()清除依赖。excus me ??？第一次看这个地方的时候，我很困扰，为什么添加完依赖后要清楚。后面仔细看了代码发现是这个样子的：
Watcher里面有两个属性：deps和newDeps。他们是用来记录上一次Watcher收集的依赖和新一轮Watcher收集的依赖，每一次有数据的更新都需要重新收集依赖（数据发布更新后，会调用Watcher的notify方法，notify方法会调用run方法，run方法会调用get方法，重新获取值，并重新收集依赖）。举个简单的例子：我们点击一个按钮，用$set给data添加了一个新属性newVal。上一轮收集的依赖中并没有newVal的依赖，所以需要重新收集依赖。
this.cleanupDeps()这个函数的作用就是将新收集的依赖newDeps赋值给deps，并将newDeps清空，准备在下一次数据更新时收集依赖。所以这个函数不是真正的清空Watcher的依赖，而是清除临时保存依赖的newDeps。

三、相关概念

1.双向数据绑定

M ，即 model，指的是模型，也就是数据；V 即view，指的是视图，也就是页面展现的部分。
双向数据绑定大概概括为：每当数据有变更时，会进行渲染，从而更新视图，使得视图与数据保持一致（model到view层）；而另一方面，页面也会通过用户的交互，产生状态、数据的变化，这个时候，这时需要将视图对数据的更新同步到数据（view到model层）。
不同的前端 MV* 框架对于这种 Model 和 View 间的数据同步有不同的处理，如：
脏值检查（angular.js）
数据劫持 + 发布者-订阅者模式（Vue）
我们上面说的Vue的数据响应式原理其实就是实现数据到视图更新原理，而视图到数据的更新，其实就是此基础上给可表单元素（input等）添加了change等事件监听，来动态修改model和 view。

2.发布-订阅者模型

订阅发布模式定义了一种一对多的依赖关系，让多个订阅者对象同时监听某一个主题对象。这个主题对象在自身状态变化时，会通知所有订阅者对象，使它们能够自动更新自己的状态。
Vue中的Dep和Watcher共同实现了这个模型