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

news2024/11/28 16:36: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.coloradmin.cn/o/987406.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【录用案例】CCF-C类,1/2区SCIEI,3个月14天录用,30天见刊,11天检索

计算机科学类SCI&EI 【期刊简介】IF&#xff1a;5.5-6.0&#xff0c;JCR1/2区&#xff0c;中科院2区 【检索情况】SCI&EI 双检&#xff08;CCF-C类&#xff09; 【征稿领域】边缘计算、算法与机器学习的结合研究 录用案例&#xff1a;3个月14天录用&#xff0c;录用…

二维码智慧门牌管理系统:解决地理地址标准化的革新方案

文章目录 前言一、地理地址标准化难题二、地理地址标准化解决方案三、统一治理多源地址四、地址数据清洗和标准化五、提升协作和效率 前言 随着信息化社会的快速发展&#xff0c;各个业务系统都涉及地址问题&#xff0c;然而每个平台的地址规范又不统一&#xff0c;这给地址管…

最新报告!TikTok 市场小家电大商机,GMV破亿的爆款如何复制?

近期&#xff0c;新锐小家电品牌Gaabor空气炸锅在东南亚卖爆了&#xff0c;单款商品GMV短时间内突破两亿&#xff0c;在印尼、泰国、马来西亚、菲律宾、越南均开设本土TikTok 小店&#xff0c;增长势头还在持续。 但Gaabor并不是个例。 整个东南亚家电市场规模增长迅速&#…

vue3+ts+vite项目引入echarts,vue3项目echarts组件封装

概述 技术栈&#xff1a;Vue3 Ts Vite Echarts 简介&#xff1a; 图文详解&#xff0c;教你如何在Vue3项目中引入Echarts&#xff0c;封装Echarts组件&#xff0c;并实现常用Echarts图例 文章目录 概述一、先看效果1.1 静态效果1.2 动态效果 二、话不多数&#xff0c;引入 …

Polarion创建项目

创建项目添加用户删除用户项目访问

消息中间件(一)

文章目录 消息中间件什么是中间件&#xff1f;为什么使用MQ&#xff1f;应用场景&#xff1f; JMS和AMQPJMSAMQPJMS和AMQP的区别 消息队列产品 消息中间件 什么是中间件&#xff1f; MQ全称为Message Queue&#xff0c;消息队列是应用程序和应用程序之间的通信方法。 中间件是…

大模型优化:RAG还是微调?

引言 随着人们对大型语言模型 (LLM) 的兴趣激增&#xff0c;许多开发人员和组织正忙于利用其能力构建应用程序。然而&#xff0c;当开箱即用的预训练LLM没有按预期或希望执行时&#xff0c;如何提高LLM申请的性能的问题。最终我们会问自己&#xff1a;我们应该使用检索增强生成…

Vue中如何实现城市3D分布图

cityfenbu.vue <template><div ><el-card class"seriesmap-box-card"><div slot"header" class"clearfix"><span>城市分布图 (点击可下钻到县)</span></div><div><div class"series-ma…

不出意外的话,2023年是AI大模型元年

这两天听的最多的新闻莫过于&#xff0c;谁谁谁&#xff08;AI 大模型&#xff09;面向全社会开放使用&#xff0c;文心一言、WPSAI、讯飞星火、百川智能等等&#xff0c;2023年&#xff0c;AI大模型注定在历史上增添了浓妆淡抹的一幕&#xff0c;未来 AI 将与各个软件应用如影…

RPC协议交互流程

文章目录 RPC特性RPC实现RPC交互流程RPC交互时序图RPC交互流程 RPC&#xff08;Remote Procedure Call&#xff0c;远程过程调用&#xff09; 是一种分布式计算的通信协议和编程模型&#xff0c;用于不同计算机或进程之间进行远程通信。它允许一个计算机程序&#xff08;通常是…

TOWE新能源电动汽车充电延长线,解决户外充电距离过短烦恼

随着新能源汽车市场的日益繁荣&#xff0c;越来越多的车主开始关注充电设备的便利性。为了满足广大车主的充电需求&#xff0c;同为科技&#xff08;TOWE&#xff09;荣誉推出全新16A三芯大功率新能源电动汽车充电延长电源线。这款产品采用优质材料&#xff0c;结构合理&#x…

@Value,@Autowired,@Qualifier

Value 当属性的类型是简单类型时&#xff0c;可以使用Value注解进行注入。 package com.powernode.spring6.bean4;import org.springframework.beans.factory.annotation.Value; import org.springframework.stereotype.Component;Component public class User {Value(value …

NASM编译器之下载安装使用

NASM的下载和安装 每种处理器都可能会有自己的汇编语言编译器&#xff0c;而对于同一款处理器来说&#xff0c;针对不同的平台(比如Windows和Linux&#xff09;&#xff0c;也会有不同版本的汇编语言编译器。 现存的汇编语言编译器有多种&#xff0c;用得比较多的有 MASM、FA…

如何加快跨国传输大文件的速度?

在当今的信息化社会&#xff0c;数据已经成为各行各业的重要资产&#xff0c;而数据的传输和交换则是数据价值的体现。在很多场景中&#xff0c;我们需要跨国传输大文件&#xff0c;比如政府、军队、金融、医疗等涉密行业&#xff0c;或者跨国、跨区域的企业合作。然而&#xf…

浅谈安科瑞ADL400系列导轨电能表在沙特电力物联网平台中的应用

1.项目概述&#xff1a;Project Overview 沙特客户需要对小区住宅&#xff0c;及商铺进行用户端电能计量&#xff0c;管理。需要安装三相交流电表监测电能数据&#xff0c;并上传到后台系统进行统一监控管理。安科瑞推荐电力物联网平台&#xff0c;可以通过云端界面和APP查看不…

Python中文字体包下载经历(经验分享)

故事背景 python解释器需要中文字体包&#xff0c;我找了半天网络上的中文字体包&#xff0c;每一个过程都非常繁琐。 都是先注册&#xff0c;在安装他们的软件&#xff0c;软件安装好后下载&#xff0c;下载的还不是字体包格式的文件&#xff0c;反正就是在欺负小白。 解决…

浅谈能源汽车下乡充电桩建设优化建议及解决方案

1.趋势分析 新能源汽车下乡已经成为提振汽车市场表现、推动汽车行业发展的重要措施。国家发改委日前也提出&#xff0c;汽车消费是支撑消费的“大头”&#xff0c;将加快推进充电桩和城市停车设施建设&#xff0c;大力推动新能源汽车下乡&#xff0c;鼓励汽车企业开发更适宜县…

若依集成mybatisplus、兼容旧分页【亲测有效】

这里写目录标题 一 修改pom文件最外层的pom.xml增加如下配置common模块的pom文件加入如下配置 二 framework模块的config包增加两个类MybatisPlusPageConfigurerSqlFilterArgumentResolver 三 全局搜索com.ruoyi.framework.config.MyBatisConfig类&#xff0c;将此类注释掉四 y…

excel表中复制粘贴有隐藏行的情况

一、原始数据&#xff0c;没有任何隐藏的情况&#xff1a; 二、隐藏3、4行&#xff1a; 这种情况下&#xff1a; 三、我想复制粘贴出可见的内容&#xff0c;全选&#xff0c;ctrlc复制 四、ctrlv粘贴到别处&#xff0c;结果却是 发现隐藏的行也被复制粘贴出来了。并不是我们想…

求求你,别再用 Mybatis Plus 的伪批量新增了!

前言 大家好&#xff0c;我是小哈~ 本文节选自小哈写的《Mybatis Plus 教程》中的批量新增一节&#xff0c;旨在帮助大家如何在 Mybatis Plus 中&#xff0c;实现 MySQL 真实的批量新增&#xff0c;而不是伪批量新增。 最近&#xff0c;小哈在带小伙伴做 前后端分离项目&#x…