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模…...
LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明
LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造，完美适配AGV和无人叉车。同时，集成以太网与语音合成技术，为各类高级系统（如MES、调度系统、库位管理、立库等）提供高效便捷的语音交互体验。 L…...
Prompt Tuning、P-Tuning、Prefix Tuning的区别
一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning（提示调优） 核心思想：固定预训练模型参数，仅学习额外的连续提示向量（通常是嵌入层的一部分）。实现方式：在输入文本前添加可训练的连续向量（软提示），模型只更新这些提示参数。优势：参数量少（仅提…...
Spark 之 入门讲解详细版（1）
1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室（Algorithms, Machines, and People Lab）开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目，8个月后成为Apache顶级项目，速度之快足见过人之处&…...
mongodb源码分析session执行handleRequest命令find过程
mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程，并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令，把数据流转换成Message，状态转变流程是：State::Created 》 St…...
ssc377d修改flash分区大小
1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...
DAY 47
三、通道注意力 3.1 通道注意力的定义 # 新增：通道注意力模块（SE模块） class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...
第25节 Node.js 断言测试
Node.js的assert模块主要用于编写程序的单元测试时使用，通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试，通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...
【论文笔记】若干矿井粉尘检测算法概述
总的来说，传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度，通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...
微信小程序云开发平台MySQL的连接方式
注：微信小程序云开发平台指的是腾讯云开发 先给结论：微信小程序云开发平台的MySQL，无法通过获取数据库连接信息的方式进行连接，连接只能通过云开发的SDK连接，具体要参考官方文档： 为什么？ 因为…...
用docker来安装部署freeswitch记录
今天刚才测试一个callcenter的项目，所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...