$nextTick和setTimeout区别(宏任务微任务)

news/2024/3/4 10:39:57

nextTick 在vue 源码中是利用 Promise.resolve()实现的。该问题实际就是Promise与setTimeout的区别,本质是Event Loop中微任务与宏任务的区别。

nextTick:在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。

简单点说就是 DOM更新后会执行的一个回调方法
setTimeout:只是延迟执行,在延迟执行的方法里,DOM有可能会更新也有可能没有更新。
常规做法就是延迟500ms或者1s

$nextTick:一般使用在DOM操作上的,Vue在更新data之后并不会立即更新DOM上的数据,就是说**如果我们修改了data中的数据,再马上获取DOM上的值,我们取得的是旧值**。官网的原话是在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。我们把获取DOM上值的操作放进$nextTick里,就可以得到更新后得数据。

setTimeout:就是个延时回调,和DOM操作无关。

建议使用nextTick在有涉及DOM更新的场景

JS中的Event Loop
我们都明白,javascript是单线程的,所有的任务都会在主线程中执行的,当主线程中的任务都执行完成之后,系统会 “依次” 读取任务队列里面的事件,因此对应的异步任务进入主线程,开始执行。

但是异步任务队列又分为: macrotasks(宏任务) 和 microtasks(微任务)。 他们两者分别有如下API:

macrotasks(宏任务): setTimeout、setInterval、setImmediate、I/O、UI rendering 等。
microtasks(微任务): Promise、process.nextTick、MutationObserver 等。
promise的then方法的函数会被推入到 microtasks(微任务) 队列中(Promise本身代码是同步执行的),而setTimeout函数会被推入到 macrotasks(宏任务) 任务队列中,在每一次事件循环中 macrotasks(宏任务) 只会提取一个执行,而 microtasks(微任务) 会一直提取,直到 microtasks(微任务)队列为空为止。

也就是说,如果某个 microtasks(微任务) 被推入到执行中,那么当主线程任务执行完成后,会循环调用该队列任务中的下一个任务来执行,直到该任务队列到最后一个任务为止。而事件循环每次只会入栈一个 macrotasks(宏任务), 主线程执行完成该任务后又会循环检查 microtasks(微任务) 队列是否还有未执行的,直到所有的执行完成后,再执行 macrotasks(宏任务)。 依次循环,直到所有的异步任务完成为止。

现在我们来看一个简单的例子分析一下:

    console.log(1);setTimeout(function(){console.log(2);}, 0);new Promise(function(resolve) {console.log(3);for (var i = 0; i < 100; i++) {i === 99 && resolve();}console.log(4);}).then(function() {console.log(5);});console.log(6);打印结果:再试试这个复杂点的例子:console.log(1);setTimeout(function(){console.log(2);}, 10);new Promise(function(resolve) {console.log(3);for (var i = 0; i < 10000; i++) {i === 9999 && resolve();}console.log(4);}).then(function() {console.log(5);});setTimeout(function(){console.log(7);},1);new Promise(function(resolve) {console.log(8);resolve();}).then(function(){console.log(9);});console.log(6);


  


值得一提的是,微任务执行完成后,就执行第二个宏任务setTimeout,由于第一个setTimeout是10毫秒后执行,第二个setTimeout是1毫秒后执行,因此1毫秒的优先级大于10毫秒的优先级,因此最后分别打印 7, 2 了

而很多人会发现vue中的nextTick会比setTimeout优先级高,就是因为nextTick是以微任务Promise.then优先的。

Vue的特点之一就是能实现响应式,但数据更新时,DOM不会立即更新,而是放入一个异步队列中,因此如果在我们的业务场景中,有一段代码里面的逻辑需要在DOM更新之后才能顺利执行,这个时候我们可以使用this.$nextTick() 函数来实现。
 


http://www.ppmy.cn/news/1099044.html

相关文章

关于java jar包说明

复杂的java应用&#xff0c;或者library&#xff0c;最终会以jar文件形式发布。 jar分为两种&#xff1a; FatJar &#xff08;JDK自己的&#xff09; 包含应用程序所有内容&#xff0c;包括配置等资源文件、依赖其它lib的jar文件 mvn package默认打出来的包。平常我们我们打…

PostgresSQL----基于Kubernetes部署PostgresSQL

【PostgresSQL----基于Kubernetes部署PostgresSQL】 文章目录 一、创建SC、PV和PVC存储对象1.1 准备一个nfs服务器1.2 编写SC、PV、PVC等存储资源文件1.3 编写部署PostgresSQL数据库的资源声明文件 二、部署PostgresSQL2.1 部署 PV、PVC等存储对象2.2 部署PostgresSQL数据库2.3…

Revit SDK 介绍:RayTraceBounce 光线反弹

前言 这个例子模拟光线反弹。 内容 通过修改参数&#xff0c;从&#xff08;0&#xff0c;0&#xff0c;0&#xff09;点向&#xff08;1&#xff0c;0&#xff0c;0&#xff09;方向射出光线&#xff0c;经过若干次反弹之后的结果。如图所示&#xff1a; 在Revit API 中&…

【List篇】使用Arrays.asList生成的List集合,操作add方法报错

早上到公司&#xff0c;刚到工位&#xff0c;测试同事就跑来说"功能不行了&#xff0c;报服务器异常了&#xff0c;咋回事";我一脸蒙&#xff0c;早饭都顾不上吃&#xff0c;要来了测试账号复现了一下&#xff0c;然后仔细观察测试服务器日志&#xff0c;发现报了一个…

BMS电池管理系统——BMS的功能模块及基本要素(二)

BMS电池管理系统 文章目录 BMS电池管理系统前言一、BMS电池管理系统各个功能模块的关系二、BMS的边界及基本要素 前言 前面了解了BMS以及他的功能模块&#xff0c;这些功能模块之间的关系是什么呢&#xff1f; 一、BMS电池管理系统各个功能模块的关系 下面我们分析一下这张图…

进程

目录 进程定义 进程与程序对比 进程分类 系统进程 用户进程 交互进程 批处理进程 守护进程 进程状态 进程组成 ​编辑正文段&#xff08;text&#xff09;和用户数据段 用户数据段 正文段 PCB进程控制块 进程标识信息 处理机状态 进程调度信息 进程控制信息 …

fastjson漏洞复现

文章目录 启动环境漏洞复现下载bp插件漏洞扫描dnslog测试是否向外请求资源用工具构造rmi服务器 反弹shell 启动环境 到vulhub目录下 cd vulhub/fastjson/1.2.24-rce安装环境并启动&#xff1a; sudo docker-compose up -d && sudo docker-compose up -d启动成功&…

python-55-打包exe执行

目录 前言一、pyinstaller二、实践打包exe1、遇坑1&#xff1a;Plugin already registered2、遇坑2&#xff1a;OSError 句柄无效 三、总结 前言 你是否有这种烦恼&#xff1f; 别人在使用你的项目时可能还需要安装各种依赖包&#xff1f;别人在使用你的项目&#xff0c;可能…

Linux之NFS服务器

目录 Linux之NFS服务器 简介 NFS背景介绍 生产应用场景 NFS工作原理 NFS工作流程图 流程 NFS的安装 安装nfs服务 安装rpc服务 启动rpcbind服务同时设置开机自启动 启动nfs服务同时设置开机自启动 NFS的配置文件 主配置文件分析 示例 案例 --- 建立NFS服务器&#…

【深度学习】 Python 和 NumPy 系列教程(三):Python容器:1、列表(初始化、索引和切片、常用操作、常用函数、拆包、遍历)

目录 一、前言 二、实验环境 三、Python容器 0. 容器介绍 1. 列表 1. 初始化 a. 创建空列表 b. 使用现有元素初始化列表 c. 使用列表生成式 d. 复制列表 2. 索引和切片 a. 索引 b. 负数索引 c. 切片 3. 常用操作&#xff08;更新、删除&#xff09; a. 更新单个…

typescript在vue3中的使用。

1.项目安装typescript,我在创建项目时就选择了安装typescript&#xff1b;如果创建vue3项目时并没有安装typescript依赖&#xff0c;也可以用命令行安装&#xff0c;执行如下命令&#xff1a; npm install typescript --save-dev 2.相关学习文章参考&#xff08;转载&#xf…

geopandas 笔记: datasets 数据集

geopandas 自带的几个数据集 1 世界各个国家 import geopandas as gpd import pandas as pdpd.set_option(display.max_rows,None) gpd.read_file(gpd.datasets.get_path(naturalearth_lowres)) pop_est人口数量continent国家所在的大陆name国家的名称iso_a3国家的三个字母的…

H-吐泡泡_ Java解法_牛客竞赛语法入门班数组栈、队列和stl习题

H 吐泡泡 题目 原题链接&#xff0c;可提交代码 题目描述 小鱼儿吐泡泡&#xff0c;嘟嘟嘟冒出来。小鱼儿会吐出两种泡泡&#xff1a;大泡泡"O"&#xff0c;小泡泡"o"。 两个相邻的小泡泡会融成一个大泡泡,两个相邻的大泡泡会爆掉。 &#xff08;是的你…

JavaScript 数组中常用的方法

添加 push&#xff1a;数组末尾添加unshift&#xff1a;数组首位添加splice(1, 0, ‘新增内容’)&#xff1a;再指定位置插入&#xff0c;第二参数为0&#xff0c;表示新增&#xff1b;大于0&#xff0c;表示修改 删除 pop&#xff1a;删除末尾shift&#xff1a;删除首位slice(…

蓝桥杯官网练习题(上三角方阵)

题目描述 方阵的主对角线之上称为"上三角"。 请你设计一个用于填充 n 阶方阵的上三角区域的程序。填充的规则是&#xff1a;使用 1&#xff0c;2&#xff0c;3.... 的自然数列&#xff0c;从左上角开始&#xff0c;按照顺时针方向螺旋填充。 例如&#xff1a;当 n…

华为云云耀云服务器L实例评测|服务器实例基础使用实践

&#x1f996;我是Sam9029&#xff0c;一个前端 Sam9029的CSDN博客主页:Sam9029的博客_CSDN博客-JS学习,CSS学习,Vue-2领域博主 **&#x1f431;‍&#x1f409;&#x1f431;‍&#x1f409;恭喜你&#xff0c;若此文你认为写的不错&#xff0c;不要吝啬你的赞扬&#xff0c;求…

储能直流侧计量表DJSF1352

安科瑞 华楠 具有CE/UL/CPA/TUV认证 DJSF1352-RN导轨式直流电能表带有双路直流输入&#xff0c;主要针对电信基站、直流充电桩、太阳能光伏等应用场合而设计&#xff0c;该系列仪表可测量直流系统中的电压、电流、功率以及正反向电能等。在实际使用现场&#xff0c;即可计量总…

【计算机网络】HTTP(上)

文章目录 1.HTTP概念2. URLurlencode 和 urldecode转义规则 3. HTTP的宏观理解HTTP的请求HTTP的响应 4. 见一见HTTP请求和响应请求报头 1. 模拟一个简单的响应response响应报头 2. 从路径中获取内容ReadFile函数的实现 3.不同资源进行区分反序列化的实现ReadOneLine函数的实现P…

微信、支付宝修改步数【小米运动】

简介 小米运动是一款流行的健身应用,可以记录用户的步数和运动数据。然而,有些用户希望能够修改步数,以达到一些特定的目的。本文将介绍一个Python脚本,可以帮助用户实现修改小米运动步数的功能。 正文 脚本介绍: 本脚本是一个Python脚本,用于修改小米运动步数。通过模…

Android开发之lint代码检测编写和使用方法

文章目录 前言项目结构待检测项目lint检查器 依赖方式待检测项目lint检查器 代码编写方法调用检测Detector注册Detector编写 Toast硬编码检测Detector注册Detector编写 使用壳工程打包待检测项目使用kotlin代码java代码 AS识别结果kotlin代码java代码 命令行检测 参考文献 前言…
最新文章