vue的nextTick是下一次事件循环吗
如题，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中…...
5.4.软件工程-系统设计
考试占比不高 概述 系统设计的主要目的就是为系统制定蓝图，在各种技术和实施方法中权衡利弊，精心设计，合理地使用各种资源，最终勾画出新系统的详细设计方案。系统设计的主要内容包括新系统总体结构设计、代码设计、输出设计、输…...
Apache Kylin与BI工具集成：数据可视化实战
Apache Kylin与BI工具集成：数据可视化实战 1. 引言 Apache Kylin是一个开源的分布式分析引擎，专注于大数据的OLAP（在线分析处理）。它可以快速地对大量数据进行多维分析，并支持与多种BI（商业智能ÿ…...
通过idea图形化界面就能push到github流程
建好自己要提交的项目 建好github想提交的地址 git initgit remote add origin https://github.com/usernamezhaozhao/github2test/tree/maingit branch maingit checkout main创建一个文件，我起了一个a.txt git pull origin main 好了，可以idea打开了 …...
C语言初阶(10）
1.野指针 野指针就是指向未知空间的指针，有以下几种情况 （1)指针未初始化 int main() {int a0;int*b;return 0; } 上面指针就是没有初始化，形成一种指向一个随机空间的地址的指针，我们可以修改成 int main() {int a0;int*bNU…...
Javaweb用过滤器写防跳墙功能和退出登录
一、什么是防跳墙功能： 防跳墙功能通常指的是防止用户在未完成认证的情况下直接访问受保护资源的功能。在 Web 开发中，这种功能通常被称为“登录拦截”或“身份验证拦截”。 在 Spring MVC 中，实现这种功能通常使用的是“拦截器”（…...
小试牛刀-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 本篇文章主…...
MySQL：Prepared Statement 预处理语句
预处理语句（Prepared Statement） 是一种在数据库管理系统中使用的编程概念，用于执行对数据库进行操作的 SQL 语句。 使用预处理语句的具体方式和语法依赖于所用的编程语言和数据库管理系统。常见的编程语言如 Java、PHP、Python 和 C# 都提供…...
Java:Thread类以及线程状态
文章目录 Thread类等待一个线程 - join()获取当前线程的引用sleep 线程状态 Thread类 等待一个线程 - join() 操作系统,针对多个线程的执行,是一个"随机调度,抢占式执行“的过程. 线程等待就是在确定两个线程的"结束顺序”. 我们无法确定两个线程调度执行的顺序,但…...
如何通过前端表格控件实现自动化报表？
背景 最近伙伴客户的项目经理遇见一个问题，他们在给甲方做自动化报表工具，项目已经基本做好了，但拿给最终甲方，业务人员不太买账，项目经理为此也是天天抓狂，没有想到合适的应对方案。 现阶段主要面临的问…...
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 双写…...
使用openpyxl库对Excel数据有效性验证
哈喽，大家好，我是木头左！ 本文将重点介绍如何使用openpyxl库进行Excel数据验证。 什么是Excel数据验证 Excel数据验证是一种功能，可以限制单元格中输入的数据类型和范围。例如，可以设置一个单元格只能输入日期，或者只能输入大于0的数字。这样，可以确保数据的准确性和一…...
【算法】浅析深度优先搜索算法
深度优先搜索算法：深入探索，穷尽可能 1. 引言 在计算机科学中，深度优先搜索（Depth-First Search，简称DFS）是一种用于遍历或搜索树或图的算法。这种算法会沿着一个分支走到底，直到这个分支结束…...
鸿蒙系统开发【ASN.1密文转换】安全
ASN.1密文转换 介绍 本示例对使用kit.CryptoArchitectureKit加密后的密文格式进行转换。kit.CryptoArchitectureKit加密后的密文格式默认为以base64显示的ASN.1格式问题，通过对密文进行base64变换后得到字符数组，以16进制数字显示，再此基础…...
【期末复习】软件质量保证与测试
考试内容 a卷 前三个部分（就业前景、岗位、发展前景（第一部分最后一个知识点），第四部分缺陷管理不考） 单选 10*2 判断 12*1 简单3*10 四个小题 （7个 pta部分涵盖+ppt） 设计 10+18 简答题（PTA简答题+PPT） 背完80分以上基本没问题 一、什么是软件。 软件是计算…...
CTFHub——XSS——反射型
1、反射型： 发现为表单式，猜测哪个可能存在注入漏洞，分别做测试注入发现name框存在xss漏洞 输入发现有回显但不是对方cookie，参考wp发现要用xss线上平台 将xss平台测试语句注入，将得到的url编码地址填入url框…...
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…...
预测各种开发语言的市场占比
预测各种开发语言的市场占比是一个复杂且动态的任务，因为它受到多种因素的影响，包括市场需求、技术趋势、项目类型、开发团队的经验和偏好等。然而，我可以根据当前的技术趋势、编程语言排行榜以及市场需求情况，给出一个大致的预测…...
mybatisplus 通用字段自动赋值与更新
1、数据库级别的自动赋值与更新 比如自动更新时间和插入时间 default current_timestamp 插入的时候获取当前 default current_timestamp on update current_timestamp 修改的时候更新时间 无法用数据库更新的通用字段 借助 mybatisplus 的 metaobjecthandler 实现metaob…...
图像生成中图像质量评估指标—FID介绍
文章目录 1. 背景介绍2. 实际应用3. 总结和讨论 1. 背景介绍 Frchet Inception Distance（\textbf{FID}）是一种衡量生成模型性能的指标，它基于Inception网络提取的特征来计算模型生成的图像与真实图像集合之间的距离。 FID利用了Inception模…...
【机器视觉】单目测距——运动结构恢复
ps：图是随便找的，为了凑个封面 前言 在前面对光流法进行进一步改进，希望将2D光流推广至3D场景流时，发现2D转3D过程中存在尺度歧义问题，需要补全摄像头拍摄图像中缺失的深度信息，否则解空间不收敛…...
工程地质软件市场：发展现状、趋势与策略建议
一、引言 在工程建设领域，准确把握地质条件是确保项目顺利推进和安全运营的关键。工程地质软件作为处理、分析、模拟和展示工程地质数据的重要工具，正发挥着日益重要的作用。它凭借强大的数据处理能力、三维建模功能、空间分析工具和可视化展示手段&…...
【RockeMQ】第2节｜RocketMQ快速实战以及核⼼概念详解（二）
升级Dledger高可用集群 一、主从架构的不足与Dledger的定位 主从架构缺陷 数据备份依赖Slave节点，但无自动故障转移能力，Master宕机后需人工切换，期间消息可能无法读取。Slave仅存储数据，无法主动升级为Master响应请求ÿ…...
基于PHP的连锁酒店管理系统
有需要请加文章底部Q哦 可远程调试 基于PHP的连锁酒店管理系统 一 介绍 连锁酒店管理系统基于原生PHP开发，数据库mysql，前端bootstrap。系统角色分为用户和管理员。 技术栈 phpmysqlbootstrapphpstudyvscode 二 功能 用户 1 注册/登录/注销 2 个人中…...
TJCTF 2025
还以为是天津的。这个比较容易，虽然绕了点弯，可还是把CP AK了，不过我会的别人也会，还是没啥名次。记录一下吧。 Crypto bacon-bits with open(flag.txt) as f: flag f.read().strip() with open(text.txt) as t: text t.read…...
2025年- H71-Lc179--39.组合总和(回溯,组合）--Java版
1.题目描述 2.思路 当前的元素可以重复使用。 （1）确定回溯算法函数的参数和返回值（一般是void类型） （2）因为是用递归实现的，所以我们要确定终止条件 （3）单层搜索逻辑 二…...
算法250609 高精度
加法 #include<stdio.h> #include<iostream> #include<string.h> #include<math.h> #include<algorithm> using namespace std; char input1[205]; char input2[205]; int main(){while(scanf("%s%s",input1,input2)!EOF){int a[205]…...
背包问题双雄：01 背包与完全背包详解（Java 实现）
一、背包问题概述 背包问题是动态规划领域的经典问题，其核心在于如何在有限容量的背包中选择物品，使得总价值最大化。根据物品选择规则的不同，主要分为两类： 01 背包：每件物品最多选 1 次（选或不选&#…...
用鸿蒙HarmonyOS5实现国际象棋小游戏的过程
下面是一个基于鸿蒙OS (HarmonyOS) 的国际象棋小游戏的完整实现代码，使用Java语言和鸿蒙的Ability框架。 1. 项目结构 /src/main/java/com/example/chess/├── MainAbilitySlice.java // 主界面逻辑├── ChessView.java // 游戏视图和逻辑├── …...
(12)-Fiddler抓包-Fiddler设置IOS手机抓包
1.简介 Fiddler不但能截获各种浏览器发出的 HTTP 请求，也可以截获各种智能手机发出的HTTP/ HTTPS 请求。 Fiddler 能捕获Android 和 Windows Phone 等设备发出的 HTTP/HTTPS 请求。同理也可以截获iOS设备发出的请求，比如 iPhone、iPad 和 MacBook 等苹…...