Vue 的数据为什么频繁变化但只会更新一次？

Vue.js 使用了一种叫做批量异步更新的策略来处理数据变化和视图更新。

当你改变一个响应式数据时，Vue.js 不会立即更新视图，而是把这个组件标记为“脏的”，然后在事件循环的下一个“tick”中，一次性更新所有标记的组件。

这种策略的好处是，如果你在一个事件循环中多次改变同一个数据，Vue.js 只会更新一次视图，从而避免了不必要的计算和 DOM 操作，提高了性能。

这种策略是基于 JavaScript 的事件循环和 Vue.js 的依赖跟踪系统实现的。当一个数据变化时，Vue.js 会通知所有依赖这个数据的 watcher，然后这些 watcher 会把它们所在的组件添加到一个队列中。在下一个事件循环“tick”中，Vue.js 会遍历这个队列，更新所有的组件。

你可以使用 Vue.nextTick(callback) 方法来在下一个“tick”中执行一段代码。这个方法接受一个回调函数，这个函数会在 DOM 更新完成后被调用。

this.message = 'Hello Vue!'
Vue.nextTick(() => {
  // 这个回调函数会在 DOM 更新完成后被调用
  console.log(this.$el.textContent) // 'Hello Vue!'
})

在这个例子中，Vue.nextTick() 确保了我们的代码在 DOM 更新完成后才被执行。