Vue源码学习笔记（五）依赖收集和派发更新

依赖收集

当访问对象属性的时候，会触发定义的getter

在defineReactive中，给属性添加的get逻辑主要就是负责依赖收集

Dep

Dep是一个类，是数据和watcher之间的桥梁

// src/core/instance/observer/dep.js
export default class Dep {
  static target: ?Watcher;
  id: number;
  subs: Array<Watcher>;

  constructor () {
    // 每创建一个watcher+1
    this.id = uid++
    // 所有watcher
    this.subs = []
  }
...
}

Dep.target是当前的watcher，唯一

Watcher

// src/core/instance/observer/watcher.js

触发get的时机

在执行mountComponent的时候，会实例化一个Watcher对象（渲染watcher），并把updateComponent函数传入其中，如果是函数

// Watcher的get方法
get () {
    pushTarget(this)
    let value
    const vm = this.vm
    try {
      value = this.getter.call(vm, vm)
    } catch (e) {
      if (this.user) {
        handleError(e, vm, `getter for watcher "${this.expression}"`)
      } else {
        throw e
      }
    } finally {
      // "touch" every property so they are all tracked as
      // dependencies for deep watching
      if (this.deep) {
        traverse(value)
      }
      popTarget()
      this.cleanupDeps()
    }
    return value
  }

在Watcher实例化的过程中，会执行到this.get()，pushTarget(this)将当前渲染watcher赋值给Dep.target并推入栈中，以便之后回复上一个父状态，之后执行之前传入的updateComponent => vm.update(vm._render(), hydrating)

触发了render,在render的时候就会触发在模板中使用到的数据的getter，而此时Dep.target就是之前实例化的渲染watcher

defineReactive中添加的get：

get: function reactiveGetter () {
      const value = getter ? getter.call(obj) : val
      if (Dep.target) {
        // 会调用watcher的addDep
        dep.depend()
        if (childOb) {
          childOb.dep.depend()
          if (Array.isArray(value)) {
            dependArray(value)
          }
        }
      }
      return value
    }
// dep depend
depend () {
    if (Dep.target) {
      Dep.target.addDep(this)
    }
  }

// watcher addDep
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)
      }
    }
  }
// dep addSub
addSub (sub: Watcher) {
    this.subs.push(sub)
  }

如果depsubs中没有这个watcher，将这个watcherpush进去

总结

上节说到，在创建响应式对象的时候，会给每个属性添加__ob__属性，这个属性就是一个Dep的实例，dep对象的作用就是收集了所有该属性的watcher，之后在set的时候去触发所有的watcher来通知改变的发生

派发更新

在修改数据的时候，会触发在defineReactive中的set逻辑

set: function reactiveSetter (newVal) {
      const value = getter ? getter.call(obj) : val
      /* eslint-disable no-self-compare */
      // 相同的值不触发
      if (newVal === value || (newVal !== newVal && value !== value)) {
        return
      }
      /* eslint-enable no-self-compare */
      if (process.env.NODE_ENV !== 'production' && customSetter) {
        customSetter()
      }
  // 如果有已经定义的setter，调用之
      if (setter) {
        setter.call(obj, newVal)
      } else {
        val = newVal
      }
      childOb = !shallow && observe(newVal)
  	// 派发更新
      dep.notify()
    }

notify方法就是遍历dep实例subs属性中存的watcher对象数组，分别触发他们的update方法

// watcher.js update方法
update () {
    /* istanbul ignore else */
    if (this.computed) {
     // ...
    } else if (this.sync) {
      this.run()
    } else {
      queueWatcher(this)
    }
  }

包括计算属性、同步过程和其它情况，本节应该进入的是queueWatcher

// observer/scheduler.js queueWatcher 方法
const queue: Array<Watcher> = []
const activatedChildren: Array<Component> = []
let has: { [key: number]: ?true } = {}
let circular: { [key: number]: number } = {}
let waiting = false
let flushing = false
let index = 0
export function queueWatcher (watcher: Watcher) {
  const id = watcher.id
  if (has[id] == null) {
    has[id] = true
    if (!flushing) {
      queue.push(watcher)
    } else {
      // if already flushing, splice the watcher based on its id
      // if already past its id, it will be run next immediately.
      let i = queue.length - 1
      while (i > index && queue[i].id > watcher.id) {
        i--
      }
      queue.splice(i + 1, 0, watcher)
    }
    // queue the flush
    // 保证只执行一次
    if (!waiting) {
      waiting = true
      // 在下个tick执行
      nextTick(flushSchedulerQueue)
    }
  }
}

function flushSchedulerQueue () {
  flushing = true
  let watcher, id
  // 排序，从小到大，组件更新从父到子，保证父watcher在前
  // user watcher在渲染watcher之前
  // 销毁在父组件watcher中执行，就不用执行了
  queue.sort((a, b) => a.id - b.id)
  // 遍历queue，每次都求length，循环中有可能变化
  for (index = 0; index < queue.length; index++) {
    watcher = queue[index]
    if (watcher.before) {
      watcher.before()
    }
    id = watcher.id
    has[id] = null
    watcher.run()
    // in dev build, check and stop circular updates.
    if (process.env.NODE_ENV !== 'production' && has[id] != null) {
     // 无限循环更新报错
  }

  // keep copies of post queues before resetting state
  const activatedQueue = activatedChildren.slice()
  const updatedQueue = queue.slice()
	// 每次执行完这个函数执行resetSchedulerState，重置参数状态
  resetSchedulerState()

  // call component updated and activated hooks
  callActivatedHooks(activatedQueue)
  callUpdatedHooks(updatedQueue)

  // devtool hook
  /* istanbul ignore if */
  if (devtools && config.devtools) {
    devtools.emit('flush')
  }
}

如果watcher不在全局的队列中，push进去

// watcher run
run () {
    if (this.active) {
      this.getAndInvoke(this.cb)
    }
  }

  getAndInvoke (cb: Function) {
    // 触发new Watcher时传入的getter函数，在渲染watcher时new Watcher(vm, updateComponent, noop, ...)，就是调用updateComponent，接下来就会调用vm._update方法重新渲染
    const value = this.get()
    if (
      value !== this.value ||
      // Deep watchers and watchers on Object/Arrays should fire even
      // when the value is the same, because the value may
      // have mutated.
      isObject(value) ||
      this.deep
    ) {
      // set new value
      const oldValue = this.value
      this.value = value
      this.dirty = false
      if (this.user) {
        try {
          cb.call(this.vm, value, oldValue)
        } catch (e) {
          handleError(e, this.vm, `callback for watcher "${this.expression}"`)
        }
      } else {
        cb.call(this.vm, value, oldValue)
      }
    }
  }

渲染watcher派发更新执行过程

数据set=>dep.notify()=>watcher.update()=>渲染watcher：queueWatcher()=>flushSchedulerQueue()=>watcher.run()=>watcher.getAndInvoke()=>watcher.get()=>watcher.get()=>watcher.getter()=>getter = expOrFn（创建watcher实例传入的第二个参数）=>updateComponent()=>vm._update()

总结

• 在对props、data等数据初始化过程中，会调用observe方法使其中的数据变为响应式对象
• observe方法初始化一个Observer类的实例，传入需要观测的对象
• Observer对象初始化过程中在观测的数据上添加__ob__属性，并将自身的值赋给__ob__；再对观测数据是数组的情况特别处理，保证属性是对象的情况也被观测到。最终对对象里的每一个值调用defineReactive
• defineReactive会将传入的对象变成一个响应式对象，添加getter和setter
• 在get中，调用dep（dep在defineReactive函数的闭包中会被保存）的depend方法，将Dep.target（当前的watcher对象）保存在subs属性中，用于之后派发更新触发所有wathcer对象update
• 在set中，调用闭包中dep对象的notify方法，循环subs属性中所有的watcher，调用update；在渲染watcher的update中，调用queueWatcher将要更新的watcher push到一个队列中，在nextTick的时候调用flushScedulerQueue
  • flushSchedulerQueue会对queue以watcher的id大小排序，保证渲染顺序，并调用watcher.run()
  • run方法又调用getAndInvoke方法，在渲染watcher的情况下，调用watcher实例的get方法，调用了getter属性（实例化watcher时传入的第二个参数），在渲染watcher的情况下就是updateComponent方法，最终触发vm._update开始重新渲染