当响应式数据更新的时候，会发生什么？

本篇作为vue响应式原理的最后一篇，作为最后一个总结，比起我们helloworld的例子我们新的例子长这样：

template:
<div id="app">
    {{msg}}
    <div @click="change">{{test}}</div>
</div>
script:
new Vue({
        el:'#app',
        watch:{
            msg:function(newer,old){
                console.log(newer,old)
            }
        },
        data:function(){
            return{
                msg: 'hello,world'
            }
        },
        computed:{
            test: function(){
                return this.msg + '嗨，世界'
            }
        },
        methods:{
            change(){
                this.msg = '10086'
            }
        }
    })

我们从点击事件发生的这一刻，开始追踪，当change事件发生后，首先会激活data里的msg上的set方法：

set: function reactiveSetter (newVal) {
        var 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 (customSetter) {
          customSetter();
        }
        // #7981: for accessor properties without setter
        if (getter && !setter) { return }
        if (setter) {
          setter.call(obj, newVal);
        } else {
          val = newVal;
        }
        childOb = !shallow && observe(newVal);
        dep.notify();
      }

此时，根据前文介绍，dep里的watcher应该有三个，第一个是watch的，第二个是组建的，第三个是computed的，然后，开始执行，这里注意到当一个响应式数据的值前后如果相等的话，set是会直接返回的，只有不相同的时候才回去执行下面的方法，也就是dep.notify:

Dep.prototype.notify = function notify () {
    // stabilize the subscriber list first
    var subs = this.subs.slice();
    if (!config.async) {
      // subs aren't sorted in scheduler if not running async
      // we need to sort them now to make sure they fire in correct
      // order
      subs.sort(function (a, b) { return a.id - b.id; });
    }
    for (var i = 0, l = subs.length; i < l; i++) {
      subs[i].update();
      console.log(i)
    }
  }

一般我们的config.async都是true，表明我们组建的更新是异步的,然后执行每个warcher的update方法：

Watcher.prototype.update = function update () {
    /* istanbul ignore else */
    if (this.lazy) {
      this.dirty = true;
    } else if (this.sync) {
      this.run();
    } else {
      queueWatcher(this);
    }
  };

结合前面的知识可以清楚的知道，这里，computed上的watcher的this.lazy是true，因此这里在执行computed上watcher的update方法的时候，只会简单的将他的watcher的dirty标为true，而在执行watch和组建的watcher上的update方法的时候，会调用queueWatcher方法：

 /**
   * Push a watcher into the watcher queue.
   * Jobs with duplicate IDs will be skipped unless it's
   * pushed when the queue is being flushed.
   */
  function queueWatcher (watcher) {
    var 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.
        var 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;

        if (!config.async) {
          flushSchedulerQueue();
          return
        }
        nextTick(flushSchedulerQueue);
      }
    }
  }

queueWatcher在flush掉一个watcher之前，只会将同一个watcher往队列里添加一次，如果没有开始刷新队列，则将其push进队列，如果已经开始刷新了，就把他按从小到大的顺序添加到合适的位置，然后因为waiting默认值为false，开始走nextTick，next开始之前，注意到，这里传进去了一个函数，flushSchedulerQueue：

/**
   * Flush both queues and run the watchers.
   */
  function flushSchedulerQueue () {
    currentFlushTimestamp = getNow();
    flushing = true;
    var watcher, id;

    // Sort queue before flush.
    // This ensures that:
    // 1. Components are updated from parent to child. (because parent is always
    //    created before the child)
    // 2. A component's user watchers are run before its render watcher (because
    //    user watchers are created before the render watcher)
    // 3. If a component is destroyed during a parent component's watcher run,
    //    its watchers can be skipped.
    queue.sort(function (a, b) { return a.id - b.id; });

    // do not cache length because more watchers might be pushed
    // as we run existing watchers
    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 (has[id] != null) {
        circular[id] = (circular[id] || 0) + 1;
        if (circular[id] > MAX_UPDATE_COUNT) {
          warn(
            'You may have an infinite update loop ' + (
              watcher.user
                ? ("in watcher with expression \"" + (watcher.expression) + "\"")
                : "in a component render function."
            ),
            watcher.vm
          );
          break
        }
      }
    }

    // keep copies of post queues before resetting state
    var activatedQueue = activatedChildren.slice();
    var updatedQueue = queue.slice();

    resetSchedulerState();

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

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

这个函数呢，字如其名，就是用来刷新队列的，在刷新队列之前，还将其进行了排序，为啥要排序，英文注释说的很清楚，保证其更新顺序由父到子，保证watch上的watcher更新在组建的watcher之前，当子组件在父组件watcher run的时候被destroy的时候可以跳过他的watcher，然后就开始遍历队列开始执行watcher的run方法了：

Watcher.prototype.run = function run () {
    if (this.active) {
      var 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
        var 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方法都会调用当前watcher上的get方法，而watcher的get方法里，会调用getter方法，这个方法就是用来收集依赖，以及更新视图的方法，在watch上的watcher是一个闭包函数，会访问一下他watch的vue实例上data里的响应式数据，进而激活他的get方法，在组建的watcher上是一个叫updateComponent方法，用于刷新视图，然后继续走到下面的步骤，如果是watch的watcher就执行ifelse分支的trycatch上的语句，此时就是执行的我们自定义的watch的回调。如果是其他的就执行else分支。

然后run方法执行完毕，回到flushSchedulerQueue 里，此时所有watcher执行完毕之后剩下的东西就是重置一下队列等等一系列后续工作。但是呢flushSchedulerQueue 在实际的运行的时候是在nextTick开始运行的，什么是nextTick我们放到下一章来说。