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

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

news 2026/2/7 18:37:29

如题，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是下一次事件循环吗

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

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

5.4.软件工程-系统设计

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

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

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

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

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

通过idea图形化界面就能push到github流程

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

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

C语言初阶(10）

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

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

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

一、什么是防跳墙功能&#xff1a; 防跳墙功能通常指的是防止用户在未完成认证的情况下直接访问受保护资源的功能。在 Web 开发中&#xff0c;这种功能通常被称为“登录拦截”或“身份验证拦截”。 在 Spring MVC 中&#xff0c;实现这种功能通常使用的是“拦截器”&#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 预处理语句

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

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

Java:Thread类以及线程状态

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

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

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

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

编程日记 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

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

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

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

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

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

编程日记 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、反射型&#xff1a; 发现为表单式&#xff0c;猜测哪个可能存在注入漏洞&#xff0c;分别做测试注入发现name框存在xss漏洞 输入发现有回显但不是对方cookie&#xff0c;参考wp发现要用xss线上平台 将xss平台测试语句注入&#xff0c;将得到的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

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

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

编程日记 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&#xff08;\textbf{FID}&#xff09;是一种衡量生成模型性能的指标&#xff0c;它基于Inception网络提取的特征来计算模型生成的图像与真实图像集合之间的距离。 FID利用了Inception模…...

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

Qt Widget类解析与代码注释

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码&#xff0c;写上注释 当然可以&#xff01;这段代码是 Qt …...

编程新知 2025/11/29 21:00:30

CMake基础：构建流程详解

目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...

编程新知 2026/2/2 7:39:34

OPENCV形态学基础之二腐蚀

一.腐蚀的原理 (图1) 数学表达式&#xff1a;dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一&#xff0c;腐蚀跟膨胀属于反向操作&#xff0c;膨胀是把图像图像变大&#xff0c;而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...

编程新知 2026/1/24 20:09:04

10-Oracle 23 ai Vector Search 概述和参数

一、Oracle AI Vector Search 概述 企业和个人都在尝试各种AI&#xff0c;使用客户端或是内部自己搭建集成大模型的终端&#xff0c;加速与大型语言模型&#xff08;LLM&#xff09;的结合&#xff0c;同时使用检索增强生成&#xff08;Retrieval Augmented Generation &#…...

编程新知 2026/2/6 10:35:18

HashMap中的put方法执行流程（流程图）

1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中&#xff0c;其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下&#xff1a; 初始判断与哈希计算&#xff1a; 首先&#xff0c;putVal 方法会检查当前的 table&#xff08;也就…...

编程新知 2026/2/5 4:32:47

GitFlow 工作模式（详解）

今天再学项目的过程中遇到使用gitflow模式管理代码&#xff0c;因此进行学习并且发布关于gitflow的一些思考 Git与GitFlow模式 我们在写代码的时候通常会进行网上保存&#xff0c;无论是github还是gittee&#xff0c;都是一种基于git去保存代码的形式&#xff0c;这样保存代码…...

编程新知 2026/1/26 12:37:40

并发编程 - go版

1.并发编程基础概念 进程和线程 A. 进程是程序在操作系统中的一次执行过程&#xff0c;系统进行资源分配和调度的一个独立单位。B. 线程是进程的一个执行实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位。C.一个进程可以创建和撤销多个线程;同一个进程中…...

编程新知 2026/1/31 6:50:52

【Android】Android 开发 ADB 常用指令

查看当前连接的设备 adb devices 连接设备 adb connect 设备IP 断开已连接的设备 adb disconnect 设备IP 安装应用 adb install 安装包的路径 卸载应用 adb uninstall 应用包名 查看已安装的应用包名 adb shell pm list packages 查看已安装的第三方应用包名 adb shell pm list…...

编程新知 2025/11/18 18:31:30

Web后端基础(基础知识)

BS架构&#xff1a;Browser/Server&#xff0c;浏览器/服务器架构模式。客户端只需要浏览器&#xff0c;应用程序的逻辑和数据都存储在服务端。 优点&#xff1a;维护方便缺点&#xff1a;体验一般 CS架构&#xff1a;Client/Server&#xff0c;客户端/服务器架构模式。需要单独…...

编程新知 2026/2/2 0:52:30

Qt 事件处理中 return 的深入解析

Qt 事件处理中 return 的深入解析 在 Qt 事件处理中&#xff0c;return 语句的使用是另一个关键概念&#xff0c;它与 event->accept()/event->ignore() 密切相关但作用不同。让我们详细分析一下它们之间的关系和工作原理。 核心区别&#xff1a;不同层级的事件处理 方…...

编程新知 2025/6/10 21:19:52