Vue 学院 #6：异步更新队列

Vue异步执行 DOM 更新！但这意味着什么呢？

我将首先解释如果我们不使用异步更新队列会发生什么。

正常情况

想象一下，我们有一个数组并将其显示到 DOM 中，每次我们推送一个新项目时，我们都会渲染 DOM。

如果我们只添加一些项目，效果可能还不显著。但想象一下，如果我们决定同时向这个数组中添加 1000 个项目，DOM 就需要渲染 1000 次！你的 DOM 会爆炸🤯。

我们实际上不需要更新 DOM 1000 次，我们只需要一次，并且我们应该只在完成添加所有项目后才更新它！

异步更新队列

Vue异步执行 DOM 更新。每当观察到数据更改时（在我们的例子中，将项目添加到数组中），它不会直接更新 DOM，而是将所有更改添加到队列（缓冲区）中。

它会等待一段时间（将所有项目添加到数组所需的时间），之后才会更新 DOM。因此，我们添加了 1000 个项目，但 DOM 只会更新一次！

这种缓冲的重复数据删除对于避免不必要的计算和 DOM 操作非常重要。

队列将更新 DOM 的时刻称为tick！

一般来说，我们不需要太在意这一点，除非我们需要根据 DOM 状态执行某些操作。但我们并不建议基于 DOM 状态执行操作，我们建议使用组件状态而不是DOM 状态。

例子

<div id="example">{{ message }}</div>

const vm = new Vue({
  el: '#example',
  data: {
    message: '123'
  }
})

vm.message = 'new message' // change data, but vue will not re-render immediately !

vm.$el.textContent === 'new message' // false since the update is in the Queue, and not updated for the moment in the DOM

// NextTick is the moment where the Queue update all changed !
Vue.nextTick(function () {
  // The DOM is update with the new change!
  vm.$el.textContent === 'new message' // true
})