vue:对三种获取更新后的dom的方式进行分析

一、问题分析

由于vue的异步更新机制,我们在同步代码中是无法获取到更新后的dom的信息的

针对这个问题,我们有三种解决方案获取更新后的dom:

1.nextTick()

2.setTimeout()

3.在微任务中获取

因为更新是在同步任务结束后,执行微任务之前,所以上面三种方式可以得到更新后的dom。

二、执行顺序分析

先看代码,下面的代码中,通过点击使得绑定的按钮元素高度增加,在js中通过打印来去观察不同获取该元素信息的方式的区别。

<template><div class="page"><button@click="clickButton"ref="buttonRef":style="{ height: `${height}px`, width: '60px' }"></button><div class="info">{{ height }}</div></div>
</template>
<script setup lang="ts">
import { nextTick, ref } from "vue";
const height = ref(40);
const buttonRef = ref();
const clickButton = async () => {height.value = height.value + 10;console.log(buttonRef.value.style.height, "直接打印"); // 40pxsetTimeout(() => {console.log(buttonRef.value.style.height, "setTimeout0打印1"); // 50px}, 0);await console.log("dom已更新");setTimeout(() => {console.log(buttonRef.value.style.height, "setTimeout0打印2"); // 50px}, 0);setTimeout(() => {console.log(buttonRef.value.style.height, "setTimeout100打印"); // 50px}, 100);nextTick(() => {console.log(buttonRef.value.style.height, "nextTick打印"); // 50px});console.log("测试数据");console.log(buttonRef.value.style.height, "微任务打印"); // 50px
};
</script>
<style>
.page {width: 100%;height: 100vh;display: flex;flex-direction: column;justify-content: center;align-items: center;
}
</style>

我们可以观察到,除了在同步代码中获取按钮元素的信息,都得到了更新后的按钮高度。同时我们可以发现,nextTick中的任务是在微任务队列的末尾的,如果把这段代码提前到同步任务中也是同样的效果。

由此,我们可以得出结论,获取更新后dom的速度,微任务中获取>nextTick中获取>宏任务中获取

三、为什么nextTick让任务进入微任务队列末尾而不是开头或者中间

1.避免无限循环。如果 nextTick 的回调被添加到队列的开头,那么在执行回调的过程中再次调用 nextTick 可能会导致无限循环,因为新产生的 nextTick 任务会立即执行,从而可能不断地往队列中添加新的任务。

2.性能优化。vue的异步更新是为了让同一个Tick中的数据变化完了再更新,将任务放入末尾也是同样的目的,可以尽可能减少不必要的dom操作。

3.便于调试。如果这个任务会到处都是那么数据的变化是难以预测的。

四、为什么优先使用nextTick()

1.nextTick的作用就是告诉vue这个dom更新好了,简单,稳定,可靠,语义强。

2.方便调试,避免无限循环,性能优化。

3.不用像settimeout一样把任务拖到下一个宏任务。

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

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

相关文章

Python模拟车站检票系统

1 问题 在日常生活中&#xff0c;车站人工检票效率很慢&#xff0c;有没有代替人工检票的系统呢&#xff1f; 2 方法 1.通过接口获取车站名 2.再根据车站名获取到车站的代码 3.然后根据车站代码获取当天的全部车次信息 4.根据当前时间筛选出大于当前时间的车次list 5.通过多线程…

【Linux环境部署】Linux系统Docker安装与配置(一)

文章目录 Docker安装较新版本ubuntu安装docker旧版本&#xff08;<16&#xff09;安装docker完全卸载离线安装 Nvidia Docker安装Nvidia Docker镜像配置 Docker Compose安装&升级 Docker安装 Docker使用手册&#xff1a;Docker中文使用手册 Docker网卡地址修改&#xf…

【数据库编程-SQLite3(三)】Ubuntu下sqlite3的使用

学习分享 1、安装sqlite3命令2、sqlite3点命令3、在Linux命令行下&#xff0c;启动sqlite33.1、编写sql脚本3.2、脚本编写--DDL3.3、进入xxx.db数据库&#xff0c;读取脚本。3.4、再次查看数据库中的表。证明表创建成功。3.5、查看数据表中用户内容3.6、查看表结构3.7、在数据库…

k8s业务上线流程

k8s业务上线流程 搭建好k8s集群之后&#xff0c;需要在集群内部运行一些业务程序&#xff0c;并可以访问&#xff0c;这样的集群才有意义。之前只是自己学习如何搭建集群&#xff0c;如何创建资源对象&#xff0c;更多的是在学习和练习层面&#xff0c;并没有实际用处&#xf…

SpringBoot3使用Swagger

SpringBoot3使用Swagger 项目中的后端接口进行简单的前端展示一、依赖引入二、快速启动1.在application.yml中配置2.或者properties文件,则配置3.启动项目访问swagger 项目中的后端接口进行简单的前端展示 Swagger是一个用于设计、构建、文档化和使用RESTful Web服务的开源工具…

TWM论文阅读笔记

这是ICLR2023的一篇world model论文&#xff0c;用transformer来做世界模型的sequence prediction。文章贡献是transformer-based world model&#xff08;不同于以往的如transdreamer的world model&#xff0c;本文的transformer-based world model在inference 的时候可以丢掉…

Xcode编译报错 #error unsupported Swift architecture

1. 问题描述&#xff1a; Xcode15 引入某些三方库时&#xff0c;真机跑起来没问题&#xff1b;但模拟器build时报错卡在 #error unsupported Swift architecture&#xff0c;注释掉代码也不行&#xff1b; 2. 解决办法&#xff1a; 得找到Rosetta类型模拟器才能run起来&…

信号处理中的梯型权重操作(Tapering)

目录 1. 引言2. 一个Tapering操作的例子3. Tapering操作的简单实现延伸阅读1. 引言 Tapering 操作是对信号数据在水平和垂直方向上应用梯形权重,这个操作可以减弱数据边界效应,从而在进行傅里叶变换时减少伪影和边缘效应。本文将通过一个简单的例子来展示 Tapering 操作的具…

ARM应用处理器系列

ARM 应用处理器系列是指基于 ARM 架构设计的用于各种应用场景的处理器。这些处理器被广泛应用于移动设备、嵌入式系统、服务器、物联网设备等领域。以下是一些主要的 ARM 应用处理器系列&#xff1a; 1. Cortex-A 系列 Cortex-A 系列处理器专为高性能和低功耗应用设计&#xf…

【C/C++】工业级别的日志文件轮转策略原理

日志文件轮转&#xff08;Log Rotation&#xff09;是一种日志管理策略&#xff0c;用于自动管理日志文件的大小和数量。随着应用程序运行时间的增加&#xff0c;日志文件可能会变得非常大&#xff0c;这不仅会占用大量的磁盘空间&#xff0c;还可能影响应用程序的性能。日志文…

函数模板的具体化

函数模板优点是通用性&#xff0c;可以解决某个方面的普遍性问题&#xff0c;但是这个世界上的事情不是绝对的&#xff0c;有普遍的&#xff0c;就有绝对的。举个栗子&#xff1a; #include <iostream> using namespace std; template <typename T> void Swap(T &…

redis持久化方式—AOF

redis为什么需要持久化 redis是内存数据库&#xff0c;redis所有的数据都保存在内存中 如果此时pc关机或重启&#xff0c;那么内存中的用户数据岂不是丢失了&#xff1f;redis这么不安全吗&#xff1f; 作为数据库&#xff0c;保证数据的安全&#xff0c;持久是基本需求&…

SQL笔记——表的操作、数据修改、列的属性和查询操作

表的操作 在之前应该有一个数据库 先创建一个 user 库,然后可以查看、修改、删除 create databases user;//创建 show databases; //展示 alter databases user //修改 修改的内容; drop databases user1;//删除 或者是 drop databases if exists user1;添加数据之前肯定要知…

java基础-IDEA环境基础用法自动导包等设置

IDEA&#xff1a; 是用于Java语言开发的集成环境&#xff0c;它是业界公认的目前用于Java程序开发最好的工具。 把代码编写&#xff0c;编译&#xff0c;执行&#xff0c;调试等多种功能综合到一起的开发工具。 IDEA项目结构&#xff1a; 多级包用 . 链接。 快速生成 快…

STM32的通用定时器中断编程

如果遇到需要单片机产生严格时序的场景&#xff08;比如DAC输出特定模拟信号&#xff0c;GPIO口控制模拟开关&#xff09;&#xff0c;延时函数可能就无法胜任了。最近在工作时公司上级教会了我使用“门票”思维&#xff08;中断标志位)编写单片机裸机程序&#xff0c;今天写一…

JAVA 替代SWITCH 枚举值 CASE 的 策略模式

看看使用策略模式之前的代码&#xff1a; // switch (type) { // case 0: // terme.setKhdmlist(dmList); // List<Kehu> list getSdList$api(terme); // for (Kehu kehu : list) { // …

论文学习_Large Language Models Based Fuzzing Techniques: A Survey

论文名称发表时间发表期刊期刊等级研究单位 Large Language Models Based Fuzzing Techniques: A Survey 2024年arXiv- 悉尼大学 0.摘要 研究背景在软件发挥举足轻重作用的现代社会&#xff0c;软件安全和漏洞分析对软件开发至关重要&#xff0c;模糊测试作为一种高效的软件…

前端学习-day10

文章目录 01-体验平面转换02-平移效果03-绝对定位元素居中04-案例-双开门06-转换旋转中心点07-案例-时钟-转换原点08-平面转换-多重转换09-缩放效果10-案例-按钮缩放11-倾斜效果12-渐变-线性13-案例-产品展示14-渐变-径向15-综合案例-喜马拉雅 01-体验平面转换 <!DOCTYPE h…

2024.6.17总结1113

今天早上进行了毕设答辩&#xff0c;无论是打印报告还是答辩&#xff0c;整个过程都挺顺利的。 其实&#xff0c;昨天还是挺慌的&#xff0c;就觉得自己的论文还存在许多问题&#xff0c;但是&#xff0c;早上看到那么多人的论文都存在这样那样的问题的时候&#xff0c;我反而…

Spring框架的原理及应用详解(七)

本系列文章简介&#xff1a; 在当今的软件开发世界中&#xff0c;随着应用复杂性的不断增加和技术的快速发展&#xff0c;传统的编程方式已经难以满足快速迭代、高可扩展性和易于维护的需求。为此&#xff0c;开发者们一直在寻求更加高效、灵活且易于管理的开发框架&#xff0c…