Vue源码学习笔记之实现双向数据绑定（三）--- 总结

我们上一篇了解了vue源码对双向数据绑定的实现，这一篇做一下总结。

>Observer

角色：数据观察者

作用：利用 Object.defineProperty 给每个值都添加getter和setter方法，使其可以对数据的所有属性进行监听，如有变动可以拿到最新的值并通知订阅者。

get方法：添加相应依赖，如果Dep.target 存在，再判断这个watcher是否已经添加到了相关依赖中，如果没有则添加订阅者，如果有了就不作处理。

set方法：调用dep.notify()使相应的依赖进行更新。

对象默认的 [[Put]] 和 [[Get]] 操作分别可以控制属性值的设置和获取。

在 ES5 中可以使用 getter 和 setter 部分改写默认操作，但是只能应用在单个属性上，无法应用在整个对象上。getter 是一个隐藏函数，会在获取属性值时调用。setter 也是一个隐藏函数，会在设置属性值时调用。

当你给一个属性定义 getter、setter 或者两者都有时，这个属性会被定义为“访问描述符”。对于访问描述符来说，JavaScript 会忽略它们的 value 和 writable 特性，取而代之的是关心 set 和 get(还有 configurable 和 enumerable)特性。

注意点：Vue并没有直接在 get 中调用 addSub，而是调用的 dep.depend, 目的是将当前的 dep 对象收集到 watch 对象中。

 

>Dep

角色：依赖收集类，是观察者和订阅者联系的一个桥梁。data下的每一个属性都有一个唯一的Dep对象。

作用：维持一个订阅者队列, 有添加，移除订阅者，通知订阅者更新数据这几个方法。

注意：利用闭包定义了一个唯一ID：uid; 每一个dep都有其唯一ID。

 

>Watcher

角色：订阅者

作用：存储一个Watcher对象到 Dep.target, 并触发对应属性的 getter，收集一个 Watcher 对象到Dep的订阅者队列。

注意：Dep.target 就是一个订阅者，也就是一个 Watcher 实例，只有当Dep.target(订阅者)存在的时候，调用属性getter函数，才能完成依赖的收集工作。并且，它是全局唯一的，因为在同一时间只能有一个 Watcher 被计算。