Vue2 响应式系统之异步队列

当我们修改 Vue 实例数据时，Vue 会根据监听的数据属性触发响应式更新。Vue 2.x 的响应式系统包含依赖追踪和异步队列两个部分，其中异步队列主要负责缓存数据变更并批量更新 DOM，以最小代价更新视图。
具体来说，异步队列可以将同一事件循环中的数据变更缓存起来，避免了对于同一数据进行多次 DOM 更新，降低了性能消耗。而且通过微任务让 DOM 更新在下一帧之前进行，防止会出现一些需要同步刷新的问题。

接下来，我们通过代码示例来看看异步队列的具体使用方式。

首先，我们创建一个 Vue 实例，在模板中使用 {{}} 双花括号语法来渲染数据：

<div id="app">
  <p>{{ count }}</p>
  <button @click="increment">增 1</button>
</div>

var vm = new Vue({
  el: '#app',
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
})

当点击按钮时，会执行 increment 方法来修改 count 数据：

这时候，我们可以打印 count 数据的值：

var vm = new Vue({
  el: '#app',
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      console.log(this.count)
      this.count++
      console.log(this.count)
    }
  }
})

这里我们发现，即使已经修改了 count 数据，第一个 console.log 打印出来的值仍然是原始值。这是因为数据变更后，DOM 并没有即时更新。如果我们直接在 increment 方法中进行 DOM 操作，每一次数据的变更都会带来一次 DOM 更新的开销，而且在同一事件循环内的多次数据变更也会导致每个数据都被重新渲染。

那么，我们如何才能在数据变化后，对 DOM 进行批量更新呢？

这时候就需要用到异步队列的机制来进行优化：

var vm = new Vue({
  el: '#app',
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
      this.$nextTick(() => {
        console.log("更新后的值：", this.count)
      })
    }
  }
})

在 increment 方法中，使用 this.$nextTick() 来将这一操作异步化。$nextTick() 会将回调函数推入异步任务队列供下次事件循环时执行，这时候 DOM 已经更新了，数据变更到位了。

除此之外，Vue 还提供了 this.$nextTick() 的 Promise 形式，并提供了 Vue.nextTick() 的静态方法。两者调用方式类似，下面给出 Vue.nextTick() 的示例：

var vm = new Vue({
  el: '#app',
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
      Vue.nextTick().then(() => {
        console.log("更新后的值：", this.count)
      })
    }
  }
})

总结一下，使用异步队列可以避免不必要的性能开销，将视图更新以及其他需要异步操作的逻辑延迟到下一个事件循环中执行，同时也可以合理地控制 DOM 对页面布局的影响。