Vue另类解读--基于数据劫持的双向绑定Observer/Watcher/Dep

基于数据劫持的双向绑定，想必很多人都能理解清楚，这里就不多做描述了。只是在读Vue的基于数据劫持的双向绑定相关源码时感觉特别绕。这里记录下我对 Observer，Watcher，Dep这三者作用与关系之间的思考。

以下我是站在源码的角度进行分析的，希望能帮读源码的朋友理清思路。

直接解读

首先摊开所有的关键点：

• 这里的watcher与this.watch没有关系，反倒是this.computed中属性的构造器
• Observer负责给所有data属性绑定getter/setter方法。a,b
• 每个被Observer的属性都有一个独立的Dep。dep(a)
• Dep是每个属性用来存放父属性watcher的地方。dep(a).subs = [watcher(c)]
• watcher是一个被特殊监控的新属性，它由数个Observer属性组合而成。watcher(c)
• watcher所有子属性的Dep都包含这个watcher。c = this.a + this.b，所以
  dep(a).subs = [watcher(c)]; dep(b).subs = [watcher(c)]
• watcher同时也存储这些子属性的Dep。watcher(c).deps = [dep(a), dep(b)]
• watcher通过.get()取值时，会重新更新自己以及子属性的相互依赖。watcher.deps, dep.subs
• 子属性设置this.a = 2时，会通知自己所有的父属性重新取值并更新依赖。dep(a).notify()，即：dep(a).subs.forEach(watcher => { watcher.update() })
• watcher(c).update()，对watcher.get()的一个封装，处理同步异步，重新