Vue MVVM Dep/Observer/Watcher 浅读

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);