--- highlight: a11y-dark --- > 在最近的面试中，不少面试官叫我聊聊 `nextTick`，`nextTick` 是个啥，这篇文章咱来好好聊聊！ ## 我的回答 `nextTick` 是官方提供的一个异步方法，用于在 DOM 更新之后执行回调。正好在我的项目中用到了，就拿它来形容一下，大概的场景是渲染一个列表，每次点击按钮就会往列表后面添加十条数据，并立即跳到第十条数据的位置。我们知道渲染列表是需要耗时的，想要直接跳到第十条数据是行不通的，因为这时候数据并没有加载出来。这个时候就得进行异步操作，你可以添加一个定时器，但显然不太优雅，这时候 `nextTick` 就是最佳选择，它会在 DOM 更新完成后执行。 ## 官方描述参考[官方文档](https://cn.vuejs.org/api/general.html#nexttick) ### 描述等待下一次 DOM 更新刷新的工具方法。当你在 Vue 中更改响应式状态时，最终的 DOM 更新并不是同步生效的，而是由 Vue 将它们缓存在一个队列中，直到下一个“tick”才一起执行。这样是为了确保每个组件无论发生多少状态改变，都仅执行一次更新。 `nextTick()` 可以在状态改变后立即使用，以等待 DOM 更新完成。你可以传递一个回调函数作为参数，或者 await 返回的 Promise。 ### 示例 ```html ``` ## 异步微任务为什么说`nextTick`是异步微任务？一个例子告诉你 > 什么？你不知道什么是异步微任务？这里跳转往期介绍——[面试官：聊一下 Event - Loop - 掘金 (juejin.cn)](https://juejin.cn/post/7312293783973511168) ```html ``` 当点击按钮时，会修改 `message` 的值，我们观察同步代码，以及 `setTimeout` 和 `nextTick` 的顺序，在修改消息前打印`message.value`，进行以下猜想： - 如果`nextTick`打印的是修改后的值，说明它是异步代码 - 如果`nextTick`比`setTimeout`先打印，则说明它是异步微任务，反之则为异步宏任务观察结果： GIF 2024-3-17 15-51-19.gif

结果不出所料，`nextTick`为异步微任务。 ## 项目中的应用接下来介绍一下`nextTick`的实际应用场景来看开头提到的demo： ```html ``` 这里我们实现每次点击按钮就会往列表后面添加十条数据，并立即跳到最后条数据的位置，即最后一个`1`，看着逻辑好像是没什么问题，来看效果： ![GIF 2024-3-17 16-50-23.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0b7813e5599f45a3935d4825ddb6721b~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1626&h=929&s=137077&e=gif&f=21&b=81d0ab) 好像不太对，为什么跳到第一个`1`，才露一点点头就不滚了？原因是新加载的 DOM 还没有渲染完成，滚动是同步代码，不会等待渲染完成在滚动，所以我们要人为进行一些操作，让它等 DOM 渲染完再滚动，这正好对应了`nextTick`的效果，在 DOM 渲染完成执行回调，我们在回调中执行滚动即可。 **2.0 版本诞生：** ```html ``` ![GIF 2024-3-17 16-50-23.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cb002e8c07014e0f911fe93b8c853afa~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1626&h=929&s=129848&e=gif&f=27&b=81d0ab) **太丝滑了！** ## 手写`nextTick` 手写`nextTick`毋庸置疑是大厂面试手写题的常客。如何判断 DOM 结构是否更新？是这个手写题的切入点。这里我们使用`MutationObserver`来监听 DOM 结构的变化。参考[MDN——MutationObserver.MutationObserver()](https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver/MutationObserver) ```js //next-tick.js export function myNextTick(fn) { let app = document.getElementById('app'); // 观察目标DOM及其子节点的变化 var observerOptions = { childList: true, // 观察目标子节点的变化，是否有添加或者删除 attributes: true, // 观察属性变动 subtree: true, // 观察后代节点，默认为 false }; // 创建 MutationObserver 实例 let observer = new MutationObserver(() => { // 当DOM结构发生变化时，执行回调函数 fn(); }); // 开始监听目标DOM observer.observe(app, observerOptions); } ``` 我们的`myNextTick`函数使用了 MutationObserver 来观察指定 DOM 结构及其子节点的变化，并在变化发生时执行传入的回调函数 `fn`。我们来看看跟官方是否具有相同的效果。 ```html ``` ![GIF 2024-3-17 15-51-19.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d64a4e6bd91649139fcce792a6af7415~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=633&h=275&s=37408&e=gif&f=41&b=fcfcfc) **同样是异步微任务！** *** ```html ``` ![GIF 2024-3-17 16-50-23.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cb002e8c07014e0f911fe93b8c853afa~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1626&h=929&s=129848&e=gif&f=27&b=81d0ab) **同样丝滑！** ## 最后看到这里希望你对`nextTick`有了一定的认识，掌握 `nextTick` 的作用和实现原理，能够更好地处理 Vue 中的异步更新，提高代码的性能和质量。祝学习进步！面试顺利 ~ 已将学习代码上传至 [github](https://github.com/YangyangU/CodeSpace)，欢迎大家学习指正！ > *技术小白记录学习过程，有错误或不解的地方还请评论区留言，如果这篇文章对你有所帮助请 “点赞收藏+关注” ，感谢支持！！*