vue2.0响应式原理详解1

1. Vue响应式系统中的Watcher和Dep的关系

Dep: 是响应式属性的方法内部的一个闭包，可以理解成为该属性关联的一个对象，而dep内部保留着属性的watcher，只要调用属性的set方法，属性值改变就会调用到dep.notify,从而依次调用内部保留的watcher的update方法，从而更新页面, 也可以理解为 负责存放数据所绑定所有的订阅者的对象的容器

Watcher : 是一个中介，数据发生变化时通过watcher中转，通知组件

1. 把依赖收集的代码封装成一个Dep类，它专门用来管理依赖，每个Observer的实例，成员中都有一个Dep的实例 ;

2. 只有watcher触发的getter才会收集依赖，哪个watcher发了getter，就把哪个watcher收集到Dep中。(在getter中收集依赖,在setter中触发依赖)

3. Dep使用发布订阅模式，当数据发生变化时，会循环依赖列表，把所有的watcher都通知一遍。

4. 每个watcher和数据之间的关系可能是1对1或者多对多

5. 代码实现的巧妙之处: watcher把自己设置到全局的一个指定位置，然后读取数据，因为读取了数据，所以会触发这个数据的getter。在getter中就能得到当前正在读取数据的watcher，并把这个watcher收集到Dep中。