Vue中的nextTick如何实现微任务队列中的异步更新？

本文共计640个文字，预计阅读时间需要3分钟。

背景：Vue是异步渲染的，当data变化后，DOM不会立即被渲染。页面渲染时会将data的修改做整合，多次data修改只会做最后一次修改的渲染。这也是异步渲染的原因。

直接输出结果：只有异步渲染才能实现。

背景

vue是异步渲染的，当data改变之后，DOM不会立刻被渲染，页面渲染时会将data的修改做整合，多次data修改只会做整合最后一次性渲染出来，这也是异步渲染的原因。只有异步渲染才可以实现整合操作。

例子

methods: { update() { for (let i = 0; i < 10; i++) { this.testNum = this.testNum + i; } }, },

在你的 Vue 视图中， testNum 会发生变化。不过需要注意的是这个变化的过程，虽然我们把 firstNum 循环修改了 10 次，但是实际上它只会把最后一次的值更新到视图上——这也是非常合理的，比如说我们这个 demo 里，每一次循环给 testNum 的赋值只不过是一个过程，最终的目的是拿到 10 次循环的计算结果而已。如果我们硬去算 10 次，那么不必要的性能开销必然是令人肉疼的。