Vuejs响应式流程

前记：
今天重温 vuejs的响应式，发现在看源码（ 2.5.17-beta.0版本）的时候会被某些流程绕晕，特此记下今日所得。

---

vuejs实现数据双向绑定离不开发布-订阅者模式，通常会有一个“中间人”负责调度协调发布者与订阅者的关系。在vuejs中Dep实例就是“中间人”，负责依赖收集及通知更新的调度工作。大致流程图如下：

依次说明一下：

• Observer：发布者，负责代理数据的get和set属性，使数据的操作具有依赖收集（get时调用）和变动更新通知（set时调用）
• Dep：中间人，调度发布者与订阅者之间的关系，在Watcher获取数据时，Observer通知Dep收集订阅者，同时订阅者收集依赖；
• Watcher：订阅者，视图更新、computed属性值获取、watch选项的回调方法的调用会触发Watcher类的实例方法get()的执行，获取值的同时收集依赖，并去重同一个更新周期的依赖，避免重复触发render视图更新；