Vue 数据双向绑定

1.响应式原理

Vue的响应式原理依赖于Object.defineProperty，这也是Vue不支持IE8 以及更低版本浏览器的原因。Vue通过设定对象属性的 setter/getter 方法来监听数据的变化，通过getter进行依赖收集，而每个setter方法就是一个观察者，在数据变更的时候通知订阅者更新视图。
将整个流程进行最简化，见下图：

响应式原理

下面会重点说明Observer、Dep、Watcher代表了什么，如何实现，以及三者之间的关联关系。

2. Observer

作用：遍历对象的所有属性将其进行双向绑定。让object对象的属性都用Object.defineProperty()来进行定义，这样当获取object的属性，或者修改属性的时候，就能够触发get,set达到数据的观测的效果。

Observer

walk

defineProperty

3. Dep

Q1：为什么要依赖收集？
A1：如果data内定义了a,b,c,在实际模版中我们只用到了a,b，但是当c的值被修改，同样会触发c的setter方法，导致重新渲染。因此我们要进行区分，确保只有在a,b的值发生变动时重新渲染当前模版。
Q2：如何通过getter方法进行依赖收集？
A2：

depend

一个Dep类包含的方法如下图：

Dep

addSub的作用是增加订阅者，因为有很多订阅者，我们需要用一个数组将它进行存储；removeSub同理。

4.Watcher

观察者对象。依赖收集以后Watcher对象会被保存在Deps中，数据变动的时候会由Deps通知Watcher实例，然后由Watcher实例回调cb进行视图的更新。

Watcher

notify()函数的作用就是当set发生的时候，进行通知。

addSub

以上可以看到，Observer遍历object，为对象的每个属性绑定getter、setter，用以达到响应式。getter的时候收集依赖，依赖收集会调用dep.depend()方法，而这个方法中又包含了Wahcher.addDep()方法，从上图我们可以看到，addDep()方法中会判断当前订阅者是否已存在，否则即认为是有效依赖，执行dep.addSub。Observer、Dep和Watcher就互相关联起来了。