vue2-$nextTick有什么作用?

news2024/9/23 13:20:23

1、$nextTick是什么?
官方定义:在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的DOM。
解释:Vue在更新DOM时是异步执行的,当数据发生变化时,Vue将开启一个异步更新的队列,视图需要等到队列的所有数据变化完成之后,再进行统一更新。
举例:
HTML结构:
在这里插入图片描述
构建一个vue实例:
在这里插入图片描述
修改message值:
在这里插入图片描述
这时候,如果想获取页面最新的DOM值,却发现获取到的是旧值。
在这里插入图片描述
这是因为message数据在发生变化的时候,vue并不会立即去更新DOM,而是将修改数据的操作放在了一个异步操作的队列中。
如果我们一直修改相同的数据,异步操作队列还会进行去重。
等待同一事件循环中的所有数据变化完成之后,会将队列中的事件拿来进行处理,进行DOM更新。
1)为什么要有nextTick
举例:在这里插入图片描述
如果没有nextTick更新机制,那么num每次更新都会触发视图更新(上边代码会更新10万次视图),有了nextTick机制,只需更新一次,所以nextTick本质是一种优化策略。

2、使用场景
如果想要在修改数据之后立刻得到更新后的DOM结构,可以使用Vue.nextTick();
第一个参数为:回调函数(可以获取最近的DOM结构)
第二个参数为:执行函数的上下文
在这里插入图片描述
组件内使用vm. n e x t T i c k ( ) , 实例方法只需要通过 t h i s . nextTick(),实例方法只需要通过this. nextTick(),实例方法只需要通过this.nextTick();并且回调函数中的this将自动绑定到当前的Vue实例上。
在这里插入图片描述
$nextTick()会返回一个Promise对象,可以用async/await完成相同作用的事情。
在这里插入图片描述
3、实现原理
源码位置:/src/core/util/next-tick.js
callbacks也就是异步操作队列
callbacks新增回调函数后又执行了timerFunc函数,pending是用来标识同一时间只能执行一次。
在这里插入图片描述
在这里插入图片描述
timerFunc函数定义,这里是根据当前环境支持什么方法则调用哪个,分别有Promise.then,MutationObserver,setImmediate,setTimeout
通过上面任一方法,进行降级操作。
在这里插入图片描述
在这里插入图片描述
无论是微任务还是宏任务,都会放到flushCallbacks使用。
这里将callbacks里面的函数复制一份,同时callbacks置空。
依次执行callbacks里面的函数。
在这里插入图片描述
小结:
1、把回调函数放到callbacks等待执行
2、将执行函数放到微任务或者宏任务中。
3、事件循环到了微任务或者宏任务之后,执行函数依次执行callbacks中的回调。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/839648.html

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

相关文章

Linux学习之正则表达式元字符和grep命令

cat /etc/redhat-release看到操作系统的版本是CentOS Linux release 7.6.1810 (Core),uname -r可以看到内核版本是3.10.0-957.21.3.el7.x86_64。 正则表达式是一种搜索字符串的模式,通俗点理解,也就是普通字符和元字符共同组成的字符集合匹…

(四)Node.js - npm与包

1. 什么是包 Node.js中的第三方模块又叫做包。 不同于Node.js中的内置模块与自定义模块,包是由第三方个人或团队开发出来的,免费供所有人使用。 由于Node.js的内置模块进提供了一些底层的API,导致在基于内置模块进行项目开发时&#xff0c…

无涯教程-Perl - foreach 语句函数

foreach 循环遍历列表值,并将控制变量(var)依次设置为列表的每个元素- foreach - 语法 Perl编程语言中的 foreach 循环的语法是- foreach var (list) { ... } foreach - 流程图 foreach - 示例 #!/usr/local/bin/perllist(2, 20, 30, 40, 50);# foreach loop ex…

6.3 填充和步幅

一.填充 1.作用: 为了防止丢失边缘像素。如240x240的像素图像,经过10层5x5卷积,根据输出形状计算公式 (w-k1) x (h-k1)计算出输出形状变成了200x200。 2.方法: 最常用的方法是填充0。如下: 3.公式:计算填充原图像…

分布式系统:ACID与CAP

ACID: 在计算机科学中,ACID是数据库事务的一组特性,旨在保证数据的有效性,即使在出现错误、断电和其他意外情况下也能保持数据的一致性。在数据库的上下文中,满足ACID属性的一系列数据库操作(可以被视为对数据的单一逻…

基于C#的应用程序单例唯一运行的完美解决方案 - 开源研究系列文章

今次介绍一个应用程序单例唯一运行方案的代码。 我们知道,有些应用程序在操作系统中需要单例唯一运行,因为程序多开的话会对程序运行效果有影响,最基本的例子就是打印机,只能运行一个实例。这里将笔者单例运行的代码共享出来&…

kubernetes基于helm部署gitlab-runner

kubernetes基于helm部署gitlab-runner 这篇博文介绍如何在 Kubernetes 中使用helm部署 GitLab-runner。 先决条件: 已运行的 Kubernetes 集群已运行的 gitlab 实例 项目地址:https://gitlab.com/gitlab-org/charts/gitlab-runner 官方文档&#xff…

【Spring】Spring AOP 初识及实现原理解析

博主简介:想进大厂的打工人博主主页:xyk:所属专栏: JavaEE进阶 目录 文章目录 一、初识AOP 1.1 什么是AOP? 1.2 AOP的组成 1.2.1 切面(Aspect) 1.2.2 切点(Pointcut) 1.2.3 连接点&…

OKR管理策略:为开发团队注入动力

引言 在这个快速变化的世界中,公司需要迅速应对市场变化,并保持其目标和战略的清晰性和一致性。而OKR(Objectives and Key Results)正是这个挑战的解决方案之一。OKR的实施可以帮助开发团队明确目标,关注关键结果&…

java使用openOffice将excel转换pdf时,将所有列显示在一页

1.接上文,格式转换的基础问题已解决,但还有些细节问题需要单独处理,如excel转换至pdf时,如何将所有列显示在一页的问题,此问题大家都有遇到,解决方案也比较多,我也尝试过重写某类,来…

arcgis--网络分析(理论篇)

1、定义概念 (1)网络:由一系列相互联通的点和线组成,用来描述地理要素(资源)的流动情况。 (2)网络分析:对地理网络(如交通网络、水系网络)&…

Emacs之set-face-attribute与font-lock-add-keywords用法区别(一百二十八)

简介: CSDN博客专家,专注Android/Linux系统,分享多mic语音方案、音视频、编解码等技术,与大家一起成长! 优质专栏:Audio工程师进阶系列【原创干货持续更新中……】🚀 人生格言: 人生…

怎样将项目jar包放到服务器上

目录 1、在配置文件中配置账号密码 2.在父级的pom里面,加上这个标签 3. deploy部署 4. 注:这两个id得匹配上(原因:有的人会只有上传到测试包的权限,id对应,拥有账号密码的才能有权限) 5.子项…

Milvus Cloud凭借AI原生,可视化优势荣登全球向量数据库性能排行榜VectorDBBench.com 榜首

在当今的大数据时代,随着人工智能技术的快速发展,向量数据库作为处理大规模数据的关键工具,其性能和效率越来越受到关注。最近,全球向量数据库性能排行榜 VectorDBBench.com 公布了一份最新的评估报告,引人瞩目的是,成立不到一年的新兴公司 Milvus Cloud 凭借其 AI 原生和…

leetcode 1290.二进制链表转整数

⭐️ 题目描述 &#x1f31f; leetcode链接&#xff1a;二进制链表转整数 ps&#xff1a; 1 0 1 (0 << 1) 1 0 1 1 (1 << 1) 0 2 0 2 (2 << 1) 1 4 1 5代码&#xff1a; int getDecimalValue(struct ListNode* head) {int ans 0;while(head !…

MySQL — InnoDB介绍

文章目录 InnoDB 主要特点InnoDB 架构In-Memory StructuresBuffer PoolChange BufferAdaptive Hash IndexLog Buffer On-Disk StructuresSystem TablespaceFile-Per-Table TablespacesGeneral TablespacesUndo TablespacesTemporary TablespacesDoublewrite BufferRedo LogUndo…

spring boot中web容器配置

web容器配置 spring boot 默认的web容器是 tomcat&#xff0c;如果需要换成其他的 web 容器&#xff0c;可以如下配置。 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId><!-- 默…

ROS添加节点

1 下载项目源码 &#xff08;1&#xff09;这里我使用是哔哩哔哩的博主源码机器人工匠王杰 https://github.com/6-robot/wpr_simulation.git &#xff08;2&#xff09;建立工作空间 在主目录下载建立如下文件夹 catkin_ws----       ----src &#xff08;3&#xff09;…

Spring Boot、Spring Cloud、Spring Alibaba 版本对照关系及稳定兼容版本

Spring Boot、Spring Cloud、Spring Alibaba 版本对照关系及稳定兼容版本 引言 在 Java 生态系统中&#xff0c;Spring Boot、Spring Cloud 和 Spring Alibaba 是非常流行的框架&#xff0c;它们提供了丰富的功能和优雅的解决方案。然而&#xff0c;随着不断的发展和更新&…

【51单片机】晨启科技,酷黑版,音乐播放器

四、音乐播放器 任务要求&#xff1a; 设计制作一个简易音乐播放器&#xff08;通过手柄板上的蜂鸣器发声&#xff0c;播放2到4首音乐&#xff09;&#xff0c;同时LED模块闪烁&#xff0c;给人视、听觉美的感受。 评分细则&#xff1a; 按下播放按键A6开始播放音乐&#xff0…