当前位置：首页 > news >正文

vue的nextTick是下一次事件循环吗

news 文章来源：https://blog.csdn.net/qq_23365135/article/details/140882039 2025/4/19 17:40:00

如题，nextTick的回调是在下一次事件循环被执行的吗？

是不是下一次事件循环取决于nextTick的实现，如果是用的微任务，那么就是本次事件循环；否则如果用的是宏任务，那么就是下一次事件循环。

我们看下Vue3中nextTick的源码：

export function nextTick<T = void, R = void>(this: T,fn?: (this: T) => R,
): Promise<Awaited<R>> {const p = currentFlushPromise || resolvedPromisereturn fn ? p.then(this ? fn.bind(this) : fn) : p
}

可以看到它的实现就是使用Promise，所以妥妥的微任务，所以nextTick的回调一定是在当前事件循环的微任务阶段被执行的，而不是下一次事件循环。

但是在之前的版本中，nextTick可能会使用setTimeout，源码我们就不贴了。既然使用了setTimeout，就是宏任务，那自然就是下一次事件循环了。

可能是因为nextTick这个名字已经深入人心，所以Vue并没有要更改的意思。

那么接下来问题来了！

既然nextTick是本次事件循环，也就是说页面还没有渲染，那么为什么nextTick的回调可以获取到计算后的DOM结果呢？

这个问题真的困扰了我一段时间？

然后我做了个实验，实验代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head>
<body><button onclick="doClick()">点击</button><h1>Hello</h1>
<script>function doClick() {document.querySelector('h1').innerText = 'Hi'alert(document.querySelector('h1').innerText)}
</script>
</body>
</html>

这是纯HTML代码，不是Vue的代码。

你猜一下点击完按钮会发生什么？

结果如下：
在这里插入图片描述
点击确定后：

我们来解释一下为什么是这个结果。

首先我们点击按钮，触发了doClick事件，这是一个宏任务。
我们在这个宏任务中修改了h1的元素内容为Hi，这是一个同步操作，所以DOM的计算是立刻发生的。因此我们接下来通过alert正确打印了更新后的内容Hi。
但是alert阻止了浏览器的渲染，所以页面看到的还是Hello。
当我们点击确定之后，宏任务doClick执行结束，浏览器开始渲染，页面的内容也被更新成了Hi。

总结下来就一句话，就是DOM的计算是立刻发生的，所以可以立刻获取到结果，但是渲染是异步的。

回到nextTick，nextTick为啥能获取到计算后的DOM结果呢？

原因就是nextTick是在异步更新队列之后执行，此时真实的DOM操作已经执行了，所以就可以读取到计算后的DOM结果了。

跟nextTick是不是下一次事件循环没有关系，跟浏览器是不是已经渲染了没有关系。

vue的nextTick是下一次事件循环吗

如题，nextTick的回调是在下一次事件循环被执行的吗？ 是不是下一次事件循环取决于nextTick的实现，如果是用的微任务，那么就是本次事件循环；否则如果用的是宏任务，那么就是下一次事件循环。我们看下Vue3中…...

编程日记 2024/8/3 15:46:05

5.4.软件工程-系统设计

考试占比不高概述系统设计的主要目的就是为系统制定蓝图，在各种技术和实施方法中权衡利弊，精心设计，合理地使用各种资源，最终勾画出新系统的详细设计方案。系统设计的主要内容包括新系统总体结构设计、代码设计、输出设计、输…...

编程日记 2024/8/3 15:44:02

Apache Kylin与BI工具集成：数据可视化实战

Apache Kylin与BI工具集成：数据可视化实战 1. 引言 Apache Kylin是一个开源的分布式分析引擎，专注于大数据的OLAP（在线分析处理）。它可以快速地对大量数据进行多维分析，并支持与多种BI（商业智能&#xff…...

编程日记 2024/8/3 15:43:01

建好自己要提交的项目建好github想提交的地址 git initgit remote add origin https://github.com/usernamezhaozhao/github2test/tree/maingit branch maingit checkout main创建一个文件，我起了一个a.txt git pull origin main 好了，可以idea打开了 …...

编程日记 2024/8/3 15:41:59

C语言初阶(10）

1.野指针野指针就是指向未知空间的指针，有以下几种情况 （1)指针未初始化 int main() {int a0;int*b;return 0; } 上面指针就是没有初始化，形成一种指向一个随机空间的地址的指针，我们可以修改成 int main() {int a0;int*bNU…...

编程日记 2024/8/3 15:36:55

Javaweb用过滤器写防跳墙功能和退出登录

一、什么是防跳墙功能： 防跳墙功能通常指的是防止用户在未完成认证的情况下直接访问受保护资源的功能。在 Web 开发中，这种功能通常被称为“登录拦截”或“身份验证拦截”。在 Spring MVC 中，实现这种功能通常使用的是“拦截器”&#xff08…...

编程日记 2024/8/3 15:35:53

小试牛刀-Telebot区块链游戏机器人(TS升级)

目录 1.编写目的 2.为什么使用TypeScript实现? 3.实现功能 3.1 AI图片生成 3.2 签到 3.3 邀请 3.4 WalletConnect连接 4.功能实现详解 4.1 AI图片生成 4.2 签到 4.3 邀请 4.4 WalletConnect连接 5.功能截图 6.问题整理 Welcome to Code Blocks blog 本篇文章主…...

编程日记 2024/8/3 15:34:50

MySQL：Prepared Statement 预处理语句

预处理语句（Prepared Statement） 是一种在数据库管理系统中使用的编程概念，用于执行对数据库进行操作的 SQL 语句。使用预处理语句的具体方式和语法依赖于所用的编程语言和数据库管理系统。常见的编程语言如 Java、PHP、Python 和 C# 都提供…...

编程日记 2024/8/3 15:33:49

Java:Thread类以及线程状态

文章目录 Thread类等待一个线程 - join()获取当前线程的引用sleep 线程状态 Thread类等待一个线程 - join() 操作系统,针对多个线程的执行,是一个"随机调度,抢占式执行“的过程. 线程等待就是在确定两个线程的"结束顺序”. 我们无法确定两个线程调度执行的顺序,但…...

编程日记 2024/8/3 15:32:49

如何通过前端表格控件实现自动化报表？

背景最近伙伴客户的项目经理遇见一个问题，他们在给甲方做自动化报表工具，项目已经基本做好了，但拿给最终甲方，业务人员不太买账，项目经理为此也是天天抓狂，没有想到合适的应对方案。现阶段主要面临的问…...

编程日记 2024/8/3 15:31:48

Upload-labs靶场Pass01-Pass21全解

文章目录 Pass-01 前端JSJS绕过上传或者用burp抓包的方式 Pass-02 MIME检测Pass-03 特殊文件后缀黑白名单绕过特殊文件名绕过 Pass-04 .htacess上传Pass-05 user.ini文件上传Pass-06 大小写绕过Pass-07 空格绕过Pass-08 .绕过Pass-09 ::$DATA绕过Pass-10 .空格.绕过Pass-11 双写…...

编程日记 2024/8/3 15:29:46

使用openpyxl库对Excel数据有效性验证

哈喽，大家好，我是木头左！本文将重点介绍如何使用openpyxl库进行Excel数据验证。什么是Excel数据验证 Excel数据验证是一种功能，可以限制单元格中输入的数据类型和范围。例如，可以设置一个单元格只能输入日期，或者只能输入大于0的数字。这样，可以确保数据的准确性和一…...

编程日记 2024/8/3 15:28:45

【算法】浅析深度优先搜索算法

深度优先搜索算法：深入探索，穷尽可能 1. 引言在计算机科学中，深度优先搜索（Depth-First Search，简称DFS）是一种用于遍历或搜索树或图的算法。这种算法会沿着一个分支走到底，直到这个分支结束…...

编程日记 2024/8/3 15:27:44

鸿蒙系统开发【ASN.1密文转换】安全

ASN.1密文转换介绍本示例对使用kit.CryptoArchitectureKit加密后的密文格式进行转换。kit.CryptoArchitectureKit加密后的密文格式默认为以base64显示的ASN.1格式问题，通过对密文进行base64变换后得到字符数组，以16进制数字显示，再此基础…...

编程日记 2024/8/3 15:22:38

【期末复习】软件质量保证与测试

考试内容 a卷前三个部分（就业前景、岗位、发展前景（第一部分最后一个知识点），第四部分缺陷管理不考）单选 10*2 判断 12*1 简单3*10 四个小题（7个 pta部分涵盖+ppt）设计 10+18 简答题（PTA简答题+PPT）背完80分以上基本没问题一、什么是软件。软件是计算…...

编程日记 2024/8/3 15:21:37

CTFHub——XSS——反射型

1、反射型： 发现为表单式，猜测哪个可能存在注入漏洞，分别做测试注入发现name框存在xss漏洞输入发现有回显但不是对方cookie，参考wp发现要用xss线上平台将xss平台测试语句注入，将得到的url编码地址填入url框&#xf…...

编程日记 2024/8/3 15:18:35

docker 部署 libreoffice

创建 jdk 镜像 1、创建 Dockfile 文件 FROM centos:7 ADD jdk-8u212-linux-x64.tar.gz /usr/local RUN mv /usr/local/jdk1.8.0_212 /usr/local/jdk ENV JAVA_HOME=/usr/local/jdk ENV JRE_HOME=$JAVA_HOME/jre ENV CLASSPATH=$JAVA_HOME/lib:$JRE_HOME/lib:$CLASSPATH ENV P…...

编程日记 2024/8/3 15:17:34

预测各种开发语言的市场占比

预测各种开发语言的市场占比是一个复杂且动态的任务，因为它受到多种因素的影响，包括市场需求、技术趋势、项目类型、开发团队的经验和偏好等。然而，我可以根据当前的技术趋势、编程语言排行榜以及市场需求情况，给出一个大致的预测…...

编程日记 2024/8/3 15:16:33

mybatisplus 通用字段自动赋值与更新

1、数据库级别的自动赋值与更新比如自动更新时间和插入时间 default current_timestamp 插入的时候获取当前 default current_timestamp on update current_timestamp 修改的时候更新时间无法用数据库更新的通用字段借助 mybatisplus 的 metaobjecthandler 实现metaob…...

编程日记 2024/8/3 15:15:32

图像生成中图像质量评估指标—FID介绍

文章目录 1. 背景介绍2. 实际应用3. 总结和讨论 1. 背景介绍 Frchet Inception Distance（\textbf{FID}）是一种衡量生成模型性能的指标，它基于Inception网络提取的特征来计算模型生成的图像与真实图像集合之间的距离。 FID利用了Inception模…...

编程日记 2024/8/3 15:14:31

uniapp全局分享功能实现方法（依赖小程序右上角的分享按钮）

1、uniapp开发小程序时默认是关闭分享功能的。点击右上角三个点可查看，效果图如下： 2、在utils文件夹下新建share.js文件，名字任起。（使用的是全局分享，因为一个一个页面的去分享太麻烦且没必要。） export…...

编程日记 2024/8/3 15:13:29

Redis中BigKey的判定查找建议

判定依据 key本身的数据量过大:string类型的key它的值为5MBkey中的成员数量过多:一个zset类型的key成员数量为10000个key中的成员数据量过大:一个hash类型的key他的成员只有1000个但是这些value总大小超过100MB查看内存命令 127.0.0.1:6379> hset k1 name 123 age 123 sex…...

编程日记 2024/8/3 15:11:26