Dep class:

Dep
static target: Watcher
id: number // 當前 dep 的 uid
sups: [Watcher, ...] // sups 是依賴的 Watcher 的集合
__proto__: {
  addSub(sub: Watcher) // 新增 Watcher
  removeSub(sub: Watcher) // 刪除 Watcher
  depend() Dep.target && Dep.target.addDep(this)
  notify() sups[i].update() // 更新 Watcher
}

Observer class:

// pure, no any dependcies
Observer
new (value): Observer // 傳入需要觀察的 value
value: Object
__ob__: this // 例項屬性: __ob__ 指向 Observer 例項物件
dep: Dep // 依賴物件: Dep
[vmCount]: 0
__proto__: {
  walk(value) {
    // 定義所有 value 的每個 key 為可響應
    defineReactive(value, value[key]): {
        // 生成新 dep 和響應式 getter setter
        // 為 Dep.target 添加當前屬性的新的 dep
        dep = new Dep()
        Dep.target.addDep(dep)
    }
  }
  observeArray() // 同上
}
 

Watcher class:

Watcher
new (vm, expOrFn, cb, options: {
// vue.$watch options
 deep,
 user,
 computed,
 sync,
 before,
}, isRenderWatcher): Watcher
vm: Vue,
cb: Function,
id: number,
active: Boolean
deps: Array
depIds: Set
newDepIds: Set
getter: function
sync: Boolean
get() { Dep.target = this; value = this.getter.call(vm, vm); return value; }
addDep(dep) { dep.addSub(Watcher) }
cleanupDeps()
update() { this.sync ? this.run() : queueWatcher() }
getAndInvoke() { value = this.get() }
depend() this.dep && Dep.target && this.dep.depend()
teardown() this$1.deps[i].removeSub(this$1);