vue 基础- nextTick 的使用场景（vue的nexttick这个方法有什么用）
ztj100 2025-04-30 21:23 35 浏览 0 评论
前言
《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 的异步事件队列这个概念来解释这个原因。
关于我
一位“前端工程师”，乐于实践，并分享前端开发经验。
如果有问题或者想法，欢迎各位评论留言，愿大家共同进步。
关注【前端雨爸】，查阅更多前端技术心得。
相关推荐
- 新手学Docker:挂载卷Volumes（docker挂载nfs卷）
-
默认情况下，在容器内创建的文件，都会保存在容器基于镜像之上的一个可读写层。但是，这一层是依赖于容器而存在的，当容器不存在时，这些数据也就不存在了。而且这些数据紧紧的耦合在容器内部，很难将这些数据导出。...
- Docker命令最全详解(39个最常用命令)
-
Docker是云原生的核心，也是大厂的必备技能，下面我就全面来详解Docker核心命令@mikechen本文作者：陈睿|mikechen文章来源：mikechen.cc一、Docker基本命令...
- 松勤软件测试:详解Docker，如何用portainer管理Docker容器
-
镜像管理搜索镜像dockersearch镜像名称拉取镜像dockerpullname[:tag]列出镜像dockerimages删除镜像dockerrmiimage名称或id删除...
- 【Docker 新手入门指南】第十四章:Docker常用命令
-
以下Docker常用命令大全，涵盖容器、镜像、网络、数据卷及系统管理等核心操作，结合分类与示例助你快速掌握：一、容器生命周期管理...
- Docker 一键清盘术，释放磁盘空间不求人
-
在日常开发和运维中，Docker容器化让我们的工作更高效，但不知不觉中，磁盘空间却被镜像、容器和卷悄悄吃掉。今天教你一套干净利落的Docker磁盘清理攻略，让你轻松腾出宝贵空间！一、快速查看磁盘...
- 第六节 Docker 容器核心操作与实践指南
-
一、镜像与容器的本质关系（一）镜像（Image）的核心特性静态模板：包含应用运行所需的所有依赖（系统库、运行时、配置文件等）不可变性：镜像构建完成后内容不可修改，确保环境一致性...
- 别再去找Docker命令了，你要的常用的全都在这
-
Docker常用命令集合给大家介绍一些常用的Docker命令，对你有帮助的同学建议收藏作为一个查询手册哦。Docker容器的一些命令按功能分类大致如下：Docker环境信息info、versio...
- Docker 数据持久化最佳实践:Volume 使用全指南
-
你是不是也经常在使用Docker的时候，遇到“数据持久化”相关的困惑？容器删了，数据也跟着没了？今天就带你深入了解Docker的Volume机制，搞懂什么是Volume、怎么使用、存储在...
- 【Docker 新手入门指南】第十五章:常见故障排除
-
一、前期准备：收集关键信息在排查问题前，建议先获取以下系统数据，便于精准定位故障：...
- Docker网络与iptables实战指南:从原理到安全加固
-
一、Docker网络核心原理：容器与iptables的“共生关系”Docker容器的网络能力依赖于Linux内核的两大核心技术：虚拟网络设备（vethpair、网桥）和iptables规则链。以默认...
- 别再docker exec了!盘点进入容器排错的5种“更优雅”姿势
-
一、dockerattach：直接“附身”容器的原始方法当容器日志疯狂刷屏时，dockerattach就像直接跳进正在行驶的汽车——能看到仪表盘数据，但方向盘不在你手上。这种直接附加到容器主进程的...
- 云计算核心技术Docker教程:Docker数据卷的使用
-
在生产环境中使用Docker，要想实现数据的持久化（所谓Docker的数据持久化即数据不随着Container的结束而结束）或者需要在多个容器之间进行数据共享，需要将数据从宿主机挂载到容器中，这就会...
- 【开发技术】Mybatis中进行多表关联查询?性能是不是会变好呢?
-
Mybatis是一种基于Java的持久层框架，能够帮助我们操作数据库。在Mybatis中，进行多表关联的整合查询，需要使用嵌套查询或者使用ResultMap进行映射。下面，我们将从这两个方面来介绍多表...
- Mybatis 批量更新数据 Mysql批量更新数据
-
通常如果需要一次更新多条数据有两个方式，（1）在业务代码中循环遍历逐条更新。（2）一次性更新所有数据1批量更新相同的值不同的条件...
- Mybatis 如何批量删除数据（mybatis批量merge）
-
Mybatis如何批量删除数据本期以最常用的根据id批量删除数据为例:接口设计1:List类型单参数IntegerdeleteByIds(List<Integer>ids);...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- idea eval reset (50)
- vue dispatch (70)
- update canceled (42)
- order by asc (53)
- spring gateway (67)
- 简单代码编程 贪吃蛇 (40)
- transforms.resize (33)
- redisson trylock (35)
- 卸载node (35)
- np.reshape (33)
- torch.arange (34)
- npm 源 (35)
- vue3 deep (35)
- win10 ssh (35)
- vue foreach (34)
- idea设置编码为utf8 (35)
- vue 数组添加元素 (34)
- std find (34)
- tablefield注解用途 (35)
- python str转json (34)
- java websocket客户端 (34)
- tensor.view (34)
- java jackson (34)
- vmware17pro最新密钥 (34)
- mysql单表最大数据量 (35)