第一篇，新建watcher对象时运行的getter函数，会调用data属性的get修饰器从而触发dep.depend()函数，完成了watcher与dep依赖的收集。让watcher和data建立了联系。那么这一次，让我们看一下依赖收集完成之后，是如何完成依赖更新的。

让我们从还是在initData() 方法里面的defineReactive()方法再次开始吧！

export function defineReactive (obj: Object, key: string, val: any, customSetter?: Function) {
  let childOb = observe(val)
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter () {
      ...
      return value
    },
    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()
      }
      if (setter) {
        setter.call(obj, newVal)
      } else {
        val = newVal
      }
      childOb = observe(newVal)
      dep.notify() // <-- 依赖更新的重点
    }
  })
}

这次让我们看一下set修饰器的作用，在代码中出现 this.XXX = XXX 这样的语句时。set修饰器的方法就会被触发。首先通过getter得到旧值，判断旧值与新值是否相同，如果相同就不触发更新。然后使用新值替换旧值，再次递归观察新值，最后调用 dep.notify() 通知监听器依赖更新了。

export default class Dep {
  static target: ?Watcher;
  id: number;
  subs: Array<Watcher>;
  // 通知所有监听的watcher更新
  notify () {
    // stabilize the subscriber list first
    const subs = this.subs.slice() // 浅复制subs数组
    for (let i = 0, l = subs.length; i < l; i++) {
      subs[i].update()
    }
  }
}
export default class Watcher {
  update () {
    /* istanbul ignore else */
    if (this.lazy) {
        this.dirty = true
    } else if (this.sync) { // 默认值是false
        this.run()
    } else {
        queueWatcher(this) // <-- 会加入watcher更新队列
    }
  }
}

这个notify()函数很简单，就是运行了subs数组里面的每个Watcher对象的update()函数，调用监听自己属性的所以监听器的更新函数。

而这个update()函数也很简单，根据是否同步走不同的方法，一般sync的默认值都是false，所以我们会走queueWatcher()函数。当然run()函数迟早也会运行的。所以我们就会看一下run()函数。

run () {
  if (this.active) {
    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
      if (this.user) {
        try {
          this.cb.call(this.vm, value, oldValue)
        } catch (e) {
          handleError(e, this.vm, `callback for watcher "${this.expression}"`)
        }
      } else {
        this.cb.call(this.vm, value, oldValue)
      }
    }
  }
}

我们看到 run() 函数首先重新运行了this.get()函数得到了新的watcher监听的值。然后调用this.cb函数将Watcher的新值和旧值都传了进去。这个cb函数就是我们自己定义的监听函数，所以我们在写的时候可以使用新值和旧值去写一些我们自己的逻辑。

const queue: Array<Watcher> = []
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 >= 0 && queue[i].id > watcher.id) {
              i--
          }
          queue.splice(Math.max(i, index) + 1, 0, watcher)
      }
      // queue the flush
      if (!waiting) {
          waiting = true
          nextTick(flushSchedulerQueue)
      }
  }
}

queueWatcher() 函数，如果没有在更新，则直接把watcher对象放入队列里面就行了。但是如果正在更新，上次我们讲过，watcher的更新顺序很重要，因为在watcher之间也存在依赖关系，所以后面的watcher是有可能依赖前面的watcher的。而决定watcher前后的就是id，所以使用在队列中比较id的大小，插入到适合的位置。

最后，调用flushSchedulerQueue函数以一定的周期（nextTick）更新队列。

function flushSchedulerQueue () {
  flushing = true
  let watcher, id, vm
  queue.sort((a, b) => a.id - b.id)  // 1、重新排序

  for (index = 0; index < queue.length; index++) {
    watcher = queue[index]
    id = watcher.id
    has[id] = null
    watcher.run() // 2、运行更新方法

    if (process.env.NODE_ENV !== 'production' && has[id] != null) {
      circular[id] = (circular[id] || 0) + 1
      if (circular[id] > config._maxUpdateCount) {  // 3、判断是否触发循环更新
        warn(
          'You may have an infinite update loop ' + (
            watcher.user
              ? `in watcher with expression "${watcher.expression}"`
              : `in a component render function.`
          ),
          watcher.vm
        )
        break
      }
    }
  }

  // reset scheduler before updated hook called
  const oldQueue = queue.slice()
  resetSchedulerState()  // 4、重置更新队列

  // call updated hooks
  index = oldQueue.length
  while (index--) {
    watcher = oldQueue[index]
    vm = watcher.vm
    if (vm._watcher === watcher && vm._isMounted) {
      callHook(vm, 'updated') // 5、调用updated钩子
    }
  }
}
function resetSchedulerState () {
  queue.length = 0
  has = {}
  if (process.env.NODE_ENV !== 'production') {
    circular = {}
  }
  waiting = flushing = false
}

更新队列的 flushSchedulerQueue 函数一共有5步。分别是先对watcher进行排序，然后循环调用watcher的run()函数，完成更新。同时判断是否循环更新， config._maxUpdateCount 的值是100，接着更新完之后，会重置更新队列。最后判断 更新的watcher里面是否有视图的watcher对象，如果有调用 updated 钩子。