【Vue2 源码03】响应逻辑

响应性

defineReactive

• const dep = new Dep()
• Object.defineProperty
  • get
    • Dep.target 判断
    • dep.depend()
  • set
    • 比较判断
    • setter 判断
    • dep.notify()

一个属性对应一个Dep，取值时依赖，设置值时通知

Dep

• Dep.target 变动
  • [ hook beforeCreate ] => undefined
  • getData => undefined
  • [ hook created ] => undefined
  • [ hook beforeMount ] => undefined
  • mountComponent => Watcher
  • [ hook mounted ] => undefined
• dep
  • dep.id : number
  • dep.subs : Watcher[]
• Dep.prototype
  • depend
    • Dep.target.addDep(this)
  • notify
    • this.subs.slice().forEach((item:Watcher)=> item.update())
  • addSub
    • this.subs.push(sub: Watcher)

Watcher

• watcher

  • watcher.id = ++uid
  • watcher.cb = cb
  • watcher.active = true
  • watcher.deps = []
  • watcher.newDeps = []
  • watcher.depIds = new Set()
  • watcher.newDepIds = new Set()
  • watcher.value = this.lazy ? undefined : this.get()

• Watcher.prototype

  • addDep

    • this.newDepIds.add(dep.id)

      this.newDeps.push(dep:Dep)

      dep.addSub(this)

  • update

    • queueWatcher
      • queue.push(watcher)
        • nextTick(flushSchedulerQueue)
          • watcher.before()
          • watcher.run()

  • run

    • this.get()

dep.depend() 让 watcher 添加 dep => watcher.newDeps，后又让 deep 添加 watcher => dep.subs

renderWatcher的响应逻辑

$mount() => updateComponent() => vm._render() => dep.depend() => vm.n ++ => dep.notify() => queueWatcher(this) => watcher.run() => watcher.get() => vm._render() => dep.depend()