求助， Vue 的观察者模式里， Dep 和 Watcher 是如何确立对应关系（依赖收集）的？

在看 Vue 源码的时候发现很困惑的一点，Dep 会收集 Watcher ，然后提供出方法来执行所收集 Watcher 的 update 方法

src/core/observer/dep

export default class Dep { static target: ?Watcher; ... addSub (sub: Watcher) { this.subs.push(sub) } depend () { if (Dep.target) { Dep.target.addDep(this) } } notify () { ... for (let i = 0, l = subs.length; i < l; i++) { subs[i].update() } } ... } 

看到这没什么问题，但在我继续往下看，想了解 Dep 如何收集 Watcher 的时候，我陷入了怪圈

看的路径大致如下：

想知道：Dep 实例的 addSub ==> 找到了 Wacher 实例里有个方法 addDep ，会调用 addSub(this)进行赋值

？？因为 Watcher 也会收集 Dep ，这时候我开始有点逻辑混乱，为什么要收集 Dep ，算了先不管

找什么地方用了 Watcher 的 addDep ==> 找到了 Dep 的 depend 方法，如上面代码所示

继续找 Dep 的 depend 方法 ==> 在 Watcher 里找到了。。。把我套死在这了

export default class Watcher { ... addDep (dep: Dep) { const id = dep.id if (!this.newDepIds.has(id)) { this.newDepIds.add(id) this.newDeps.push(dep) if (!this.depIds.has(id)) { dep.addSub(this) } } } depend () { let i = this.deps.length while (i--) { this.deps[i].depend() } } } 

后面以 Dep.target 为突破口找到了 component mounted 里会 new 一个 Watcher, 勉强理解了视图 Watcher 怎么添加的，大概是 new Watcher+访问被添加了响应式的数据(全靠猜)

但是 Watcher 为什么要收集 Dep ？晕在了上面这段逻辑