当前位置：网站首页 > 技术文章 > 正文

vue 基础- nextTick 的使用场景（vuenexttick的原理浅析简书）

myzbx 2025-06-23 20:54 3 浏览

前言

《vue 基础》系列是再次回炉 vue 记的笔记，除了官网那部分知识点外，还会加入自己的一些理解。（里面会有部分和官网相同的文案，有经验的同学择感兴趣的阅读）

在开发时，是不是遇到过这样的场景，响应数据明明已经更新，但无法通过 dom 获取到。最后使用 nextTick 方法“包裹”后就能拿到。如果你不太清楚其中的原因，这篇或许能解开你的疑惑。

先来看个例子

这个例子很简单，主要来测试 nextTick 的作用。

定义了一个异步数据获取的方法 asyncDataFetch ，你可以把它当成一个接口请求，在执行 updateMsg 后，调用该方法，并最后通过 $refs 的方式来获取页面上的文本。

虽然我们已经把接口返回的数据赋值给 this.asyncData ,但实际却没有在 $refs 中获取到（html-2）。

从调试 console 中看到，其在 nextTick 方法中（html-3）被成功获取。

异步更新队列

为什么例子中，明明把数据赋值给响应对象，但 html-2 中却没有更新呢？

这其实要回到 vue 异步更新队列 的解释中，查看原因。

虽然我们通过 this.someData = ‘new value’ 执行了赋值，但该响应数据并不是同步响应到页面模板中（即更新到页面 Dom 里）。

vue 更新 Dom 是一个异步过程，所以即使我们看到页面的渲染虽然被“刷新”了，但其实并不是数据一刷新，页面就被刷新，这尤其需要我们注意。

在这个异步队列中，vue 会根据不同的“异步” api 的支持情况来选择以最佳的方式执行 tick 。这些 api 包括：Promise、MutationObserver、setImmdiate、setTimeout。如果你了解浏览器的事件循环机制，将会对理解这个异步队列容易许多。

nextTick

好，知道 vue 中数据的更新时异步这一个概念后，那么为什么在 nextTick 执行相关代码能达到预期效果就基本知道大概了。

如下是一段 nextTick 相关源码片段，你可以在 vue\src\core\util\next-tick.js 找到：

它会有什么作用呢？

一旦调用了 nextTick ，就会把我们定义的 callback 函数方法推到 callbacks 这样一个全局变量中，这个 callbacks 就是 异步更新队列。

然后会执行 timerFunc 一个异步 tick 方式封装。

如果当前客户端不支持 Promise、MutationObserver 等 api 方法时，将采用 setTimeout 后备方式：

当 vue 开始执行更新相关操作时，通过 flushCallbacks 方法来“清空”这个队列，内部执行每个队列元素：

由于操作 dom 的成本非常高， vue 在数据 watch 层做了优化来处理整个过程的计算操作。

总结

说了为何使用 nextTick 能解决开发中一些“奇怪”的问题，并抛出 vue 的异步事件队列这个概念来解释这个原因。

关于我

一位“前端工程师”，乐于实践，并分享前端开发经验。

如果有问题或者想法，欢迎各位评论留言，愿大家共同进步。

关注【前端雨爸】，查阅更多前端技术心得。

JS 赋值

上一篇：为什么 JS 开发者更喜欢 Axios 而不是 Fetch?
下一篇：2025-05-14:统计能获胜的出招序列数。用go语言，Alice 和 Bob 玩一

vue 基础- nextTick 的使用场景（vuenexttick的原理浅析简书）

前言

先来看个例子

异步更新队列

nextTick

总结

关于我

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

8.7k star，一款超炫酷的动态可视化大屏项目

说下你的vue项目的目录结构，该怎么划分?

这么牛逼的cursor功能，赶紧用起来

用上Vue3，你真的变了吗?（vue3 key）

20个免费音乐音效下载网站，无版权素材商业影片也可用

什么是“恒定光圈”，什么是“浮动光圈”?-摄影早自习第331

谷歌SEO:外贸电商网站On-page SEO优化实战「附案例」