面试官：聊聊 nextTick

前言

在最近的面试中，不少面试官叫我聊聊 nextTick，nextTick 是个啥，这篇文章咱来好好聊聊！

我的回答

nextTick 是官方提供的一个异步方法，用于在 DOM 更新之后执行回调。正好在我的项目中用到了，就拿它来形容一下，大概的场景是渲染一个列表，每次点击按钮就会往列表后面添加十条数据，并立即跳到第十条数据的位置。我们知道渲染列表是需要耗时的，想要直接跳到第十条数据是行不通的，因为这时候数据并没有加载出来。这个时候就得进行异步操作，你可以添加一个定时器，但显然不太优雅，这时候 nextTick 就是最佳选择，它会在 DOM 更新完成后执行。

官方描述

参考官方文档

描述

等待下一次 DOM 更新刷新的工具方法。

当你在 Vue 中更改响应式状态时，最终的 DOM 更新并不是同步生效的，而是由 Vue 将它们缓存在一个队列中，直到下一个“tick”才一起执行。这样是为了确保每个组件无论发生多少状态改变，都仅执行一次更新。

nextTick() 可以在状态改变后立即使用，以等待 DOM 更新完成。你可以传递一个回调函数作为参数，或者 await 返回的 Promise。

示例

&