而把借钱的人记下来的小本本就是这里 Dep 实例里的subs

// src/core/observer/dep.js

let uid = 0 // Dep实例的id，为了方便去重

export default class Dep {
 static target: ?Watcher // 当前是谁在进行依赖的收集
 id: number
 subs: Array<Watcher> // 观察者集合
 
 constructor() {
 this.id = uid++ // Dep实例的id，为了方便去重
 this.subs = [] // 存储收集器中需要通知的Watcher
 }

 addSub(sub: Watcher) { ... } /* 添加一个观察者对象 */
 removeSub(sub: Watcher) { ... } /* 移除一个观察者对象 */
 depend() { ... } /* 依赖收集，当存在Dep.target的时候把自己添加观察者的依赖中 */
 notify() { ... } /* 通知所有订阅者 */
}

const targetStack = [] // watcher栈

export function pushTarget(_target: ?Watcher) { ... } /* 将watcher观察者实例设置给Dep.target，用以依赖收集。同时将该实例存入target栈中 */
export function popTarget() { ... } /* 将观察者实例从target栈中取出并设置给Dep.target */

这里 Dep 的实例中的 subs 搜集的依赖就是 watcher 了，它是 Watcher 的实例，将来用来通知更新

2.4 Watcher

// src/core/observer/watcher.js

/* 一个解析表达式，进行依赖收集的观察者，同时在表达式数据变更时触发回调函数。它被用于$watch api以及指令 */
export default class Watcher {
 constructor(
 vm: Component,
 expOrFn: string | Function,
 cb: Function,
 options?: ?Object,
 isRenderWatcher?: boolean // 是否是渲染watcher的标志位
 ) {
 this.getter = expOrFn // 在get方法中执行
 if (this.computed) { // 是否是 计算属性
 this.value = undefined
 this.dep = new Dep() // 计算属性创建过程中并未求值
 } else { // 不是计算属性会立刻求值
 this.value = this.get()
 }
 }

 /* 获得getter的值并且重新进行依赖收集 */
 get() {
 pushTarget(this) // 设置Dep.target = this
 let value
 value = this.getter.call(vm, vm)
 popTarget() // 将观察者实例从target栈中取出并设置给Dep.target
 this.cleanupDeps()
 return value
 }

 addDep(dep: Dep) { ... } /* 添加一个依赖关系到Deps集合中 */
 cleanupDeps() { ... } /* 清理newDeps里没有的无用watcher依赖 */
 update() { ... } /* 调度者接口，当依赖发生改变的时候进行回调 */
 run() { ... } /* 调度者工作接口，将被调度者回调 */
 getAndInvoke(cb: Function) { ... }
 evaluate() { ... } /* 收集该watcher的所有deps依赖 */
 depend() { ... } /* 收集该watcher的所有deps依赖，只有计算属性使用 */
 teardown() { ... } /* 将自身从所有依赖收集订阅列表删除 */
}

get 方法中执行的 getter 就是在一开始new渲染watcher时传入的 updateComponent = () => { vm._update(vm._render(), hydrating) }，这个方法首先 vm._render() 生成渲染VNode树，在这个过程中完成对当前Vue实例 vm 上的数据访问，触发相应一众响应式对象的 getter，然后 vm._update() 去 patch

注意这里的 get 方法最后执行了 getAndInvoke，这个方法首先遍历watcher中存的 deps，移除 newDep 中已经没有的订阅，然后 depIds = newDepIds; deps = newDeps ，把 newDepIds 和 newDeps 清空。每次添加完新的订阅后移除旧的已经不需要的订阅，这样在某些情况，比如 v-if 已不需要的模板依赖的数据发生变化时就不会通知watcher去 update 了

2.5 小结

整个收集的流程大约是这样的，可以对照着上面的流程看一下

watcher 有下面几种使用场景：

只要会被别的观察者 (watchers) 依赖，比如data、data的属性、计算属性、props，就会在闭包里生成一个 Dep 的实例 dep 并在被调用 getter 的时候 dep.depend 收集它被谁依赖了，并把被依赖的watcher存放到自己的subs中 this.subs.push(sub)，以便在自身改变的时候通知 notify 存放在 dep.subs 数组中依赖自己的 watchers 自己改变了，请及时 update ~

只要依赖别的响应式化对象的对象，都会生成一个观察者 watcher ，用来统计这个 watcher 依赖了哪些响应式对象，在这个 watcher 求值前把当前 watcher 设置到全局 Dep.target，并在自己依赖的响应式对象发生改变的时候及时 update