Vue的$nextTick是如何实现异步更新和优化DOM操作的？

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

相信很多人会好奇Vue内部更新机制，或者在平时工作中遇到的一些奇怪问题需要使用`$nextTick`来解决。今天我们就来聊聊Vue中的异步更新机制以及`$nextTick`原理，以及Vue的异步更新和`$nextTick`的使用。

相信很多人会好奇Vue内部的更新机制，或者平时工作中遇到的一些奇怪的问题需要使用$nextTick来解决，今天我们就来聊一聊Vue中的异步更新机制以及$nextTick原理

Vue的异步更新

可能你还没有注意到，Vue异步执行DOM更新。只要观察到数据变化，Vue将开启一个队列，并缓冲在同一事件循环中发生的所有数据改变。如果同一个watcher被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和DOM操作上非常重要。然后，在下一个的事件循环“tick”中，Vue刷新队列并执行实际 (已去重的) 工作。

DOM更新是异步的

当我们在更新数据后立马去获取DOM中的内容是会发现获取的依然还是旧的内容。