当前位置: 首页 > news >正文

vue组件的重新渲染的问题

目录

1.方式1

2.方式2


1.方式1

修改组件上的key属性

Vue是通过diffing算法比较虚拟DOM和真实DOM,来判断新旧 DOM 的变化。key是虚拟DOM对象的标识,在更新显示时key表示着DOM的唯一性。
DOM是否变化的核心是通过判断新旧DOM的key值是否变化,如果key发生改变,则重新渲染该DOM,如果key没变,则不会重新DOM。

如果想让组件重新渲染,只需要给组件加上key属性,然后在需要重新渲染的时候,将组件绑定的key值更改就可以。

    <div class="item" v-for="(item, index) in list" :key="item.id"><child :id="item" :key="key"></child></div>

比如常见的v-for指令会经常使用到key属性,key属性内容一般使用id,因为id是唯一的。当list的内容发生变化时,vue会进行比较,key值没有变化的则不会渲染,只有key值变换的才会进行局部的渲染,这样避免了list发生了变化,整个列表都要重新渲染的问题,所有通过key属性的使用提高了性能。

所以说,如果想重新渲染组件时,只需要改变key属性即可。

例如对话框中的上传组件,每次打开需要重新渲染,避免保留上次上传的文件信息。

<template><a-modal :visible="visiable" :title="title" @ok="handleOk" @cancel="handleCancel" :ok-loading="okLoad" ><a-upload draggable accept=".xlsx" :custom-request="customRequest" :limit='1' :key="KeyInfo"/></a-modal>
</template>
<script lang="ts" setup>
import {importInfo, dowload} from '@/api/upload';
import {Message} from '@arco-design/web-vue';
import moment from "moment"
import {ref} from 'vue'const prop = defineProps({title: String,params: String,
})
const visiable = ref(false);const okLoad = ref(false)const KeyInfo = ref(Math.random());let fileInfo:any = {}
// 自定义上传事件
const customRequest = (option: any) => {const {onProgress, onError, onSuccess, fileItem, name} = optionfileInfo = fileItem;onSuccess()console.log("上传文件信息:" + JSON.stringify(fileInfo))
}const emit = defineEmits(['handleQuery'])const open = () => {visiable.value = trueKeyInfo.value = Math.random()
}
// 导出方法在父组件中进行使用
defineExpose({open});// 关闭弹框
const handleCancel = () => {visiable.value = falseKeyInfo.value = Math.random()
}
// 确定事件
const handleOk = async () => {okLoad.value = true;// 上传文件不能为空if(!fileInfo.name){Message.error({content:'上传的文件不能为空',position:'top'})okLoad.value = false;return}try {let formData = new FormData()formData.set('file', fileInfo.file)formData.set('data', prop.params ? prop.params : '')const res = await importInfo(formData)if (res == '1') {Message.success({content: '操作成功', position: 'top'});} else {Message.error({content: '导入的文件中存在重复,重复的地点信息请参照下载的文件', position: 'top'});await dowload('/em/file/mb1002', '', `地点信息_${moment().format('yyyyMMDDHHmmss')}.xlsx`, {})}visiable.value = falseemit('handleQuery')fileInfo = {}KeyInfo.value = Math.random()} catch (e) {console.log(e)} finally {okLoad.value = false;}
}
</script>

在upload组件中追加了key属性, 组件第一次加载时,key的内容为随机数,打开时设置为随机数。这样每次打开时,key变化了,所以upload组件会重新渲染。

2.方式2

使用v-if指令

当DOM设置为false的时候,当前条件块中的DOM会被销毁。如果条件块包含的是组件,则组件对应的生命周期函数(beforeDestroy、destroyed等)会执行。
当DOM设置为true的时候,当前条件块中的DOM会被重建。如果条件块包含的是组件,则组件对应的生命周期函数(created、mounted等),计算属性,watch等都会执行,相当于重新渲染。

参照:

Vue - 组件重新渲染的两种方式_vue重新渲染dom-CSDN博客

Vue 中 强制组件重新渲染的正确方法_forceupdate-CSDN博客

相关文章:

vue组件的重新渲染的问题

目录 1.方式1 2.方式2 1.方式1 修改组件上的key属性 Vue是通过diffing算法比较虚拟DOM和真实DOM&#xff0c;来判断新旧 DOM 的变化。key是虚拟DOM对象的标识&#xff0c;在更新显示时key表示着DOM的唯一性。 DOM是否变化的核心是通过判断新旧DOM的key值是否变化&#xff0c…...

opengl 学习(二)-----你好,三角形

你好&#xff0c;三角形 分类demo效果解析 分类 opengl c demo #include "glad/glad.h" #include "glfw3.h" #include <iostream> #include <cmath> #include <vector>using namespace std;/** * 在学习此节之前&#xff0c;建议将这…...

mongodb4.2升级到5.0版本,升级到6.0版本, 升级到7.0版本案例

今天一客户想把自己当前使用的mongodb数据库4.2版本升级到7.0版本。难道mongodb能直接跳跃升级吗? 经过几经查找资料&#xff0c;貌似真不行呀。确定升级流程如下: 还得从mongo4.2升级到5.0。其次再从5.0升级到6.0。最后再从6.0升级到7.0。 开始升级之前将数据进行备份 这一步…...

CPU处理器模式与异常

ARM架构中的Exception Level&#xff08;EL&#xff09; 在ARM架构中&#xff0c;Exception Level&#xff08;EL&#xff09;是一个关键概念&#xff0c;它表示了处理器当前处理异常或中断的层次。ARMv8-A架构定义了四个Exception Levels&#xff1a;EL0、EL1、EL2和EL3&…...

Day 53 |● 1143.最长公共子序列 ● 1035.不相交的线 ● 53. 最大子序和

1143.最长公共子序列 class Solution { public:int longestCommonSubsequence(string text1, string text2) {vector<vector<int>> dp(text1.size()1,vector<int>(text2.size()1,0));int res 0;for(int i 1; i < text1.size(); i){for(int j 1; j <…...

ant-desgin charts双轴图DualAxes,柱状图无法立即显示,并且只有在调整页面大小(放大或缩小)后才开始显示

摘要 双轴图表中&#xff0c;柱状图无法立即显示&#xff0c;并且只有在调整页面大小&#xff08;放大或缩小&#xff09;后才开始显示 官方示例代码 在直接复制&#xff0c;替换为个人数据时&#xff0c;出现柱状图无法显示问题 const config {data: [data, data],xFiel…...

获取别人店铺的所有商品API接口

使用淘宝淘口令接口的步骤通常包括&#xff1a; 注册成为淘宝开放平台的开发者&#xff1a;在淘宝开放平台网站上注册账号并完成认证。 创建应用以获取API密钥&#xff1a;在您的开发者控制台中创建一个应用&#xff0c;并获取用于API调用的密钥&#xff0c;如Client ID和Clie…...

成都正信:亲戚借了钱一直不还怎么委婉的说

在中国传统文化中&#xff0c;亲情关系往往被视为最为重要和敏感的部分。当亲戚间发生借贷时&#xff0c;若出现拖欠不还的情形&#xff0c;处理起来尤为棘手。面对这样的尴尬局面&#xff0c;采取委婉而有效的沟通方式至关重要。 张华最近就遇到了这样的困扰。他的表弟去年因急…...

Truenas入门级教程

Truenas入门教程 前言&#xff1a;系统相关配置 采用I3 4160&#xff0c;采用了2块500G的硬盘&#xff0c;内存为8G&#xff0c;两个网卡只用了其中一个&#xff0c;系统安装的是core版本 硬件采用DELL3020MT机箱&#xff0c;自带3个SATA网口&#xff0c;后期网口不够&#…...

窗口函数dense() over(条件)

力扣题目连接 https://leetcode.cn/problems/rank-scores/ 在 SQL 中&#xff0c;DENSE_RANK() 是一个窗口函数&#xff0c;用于计算结果集中每行的稠密排名&#xff08;dense rank&#xff09;。DENSE_RANK() 函数会为具有相同排序字段值的行分配相同的排名&#xff0c;但不会…...

蓝牙APP开发实现汽车遥控钥匙解锁汽车智能时代

在现代社会&#xff0c;随着科技的不断发展&#xff0c;汽车已经不再是简单的交通工具&#xff0c;而是与智能科技紧密相连的载体。其中&#xff0c;通过开发APP蓝牙程序实现汽车遥控钥匙成为了一种趋势&#xff0c;为车主带来了便捷与安全的体验。虎克技术公司作为行业领先者&…...

第三天 Kubernetes进阶实践

第三天 Kubernetes进阶实践 本章介绍Kubernetes的进阶内容&#xff0c;包含Kubernetes集群调度、CNI插件、认证授权安全体系、分布式存储的对接、Helm的使用等&#xff0c;让学员可以更加深入的学习Kubernetes的核心内容。 ETCD数据的访问 kube-scheduler调度策略实践 预选与…...

redis小结

1.mysql是数据库,redis是数据库&#xff0c;那么什么时候使用应该使用哪种数据库? redis做缓存是为了缓解mysql的压力&#xff0c;在数据库表数据量上千万&#xff0c;并且访问频繁时&#xff0c;mysql压力增大&#xff0c;在有索引的情况下依旧效果不佳&#xff0c;需要使用…...

PHP伪协议详解

PHP伪协议详解 一、前言1.什么是PHP伪协议&#xff1f;2.什么时候用PHP伪协议? 二、常见的php伪协议php://inputphp://filterzip://与bzip2://与zlib://协议data://phar:// 一、前言 1.什么是PHP伪协议&#xff1f; PHP伪协议是PHP自己支持的一种协议与封装协议&#xff0c;…...

进程:守护进程

一、守护进程的概念 守护进程是脱离于终端控制&#xff0c;且运行在后端的进程。&#xff08;孤儿进程&#xff09;守护进程不会将信息显示在任何终端上影响前端的操作&#xff0c;也不会被终端产生的任何信息打断&#xff0c;例如&#xff08;ctrlc&#xff09;.守护进程独立…...

千里马平台项目管理理念

软件项目的成功和失败和技术关系不大&#xff0c;尤其是应用型软件&#xff0c;不可能有技术难关卡死了项目&#xff0c;大部分问题还是出现在项目管理层面。公司的业务形态是帮助客户构建自己的信息化生态圈&#xff0c;项目管理咨询也是其中的核心内容。 我们的软件项目管理理…...

GB 2312字符集:中文编码的基石

title: GB 2312字符集&#xff1a;中文编码的基石 date: 2024/3/7 19:26:00 updated: 2024/3/7 19:26:00 tags: GB2312编码中文字符集双字节编码区位码规则兼容性问题存储空间优化文档处理应用 一、GB 2312字符集的背景 GB 2312字符集是中国国家标准委员会于1980年发布的一种…...

我的创作周年纪念日

机缘 最初成为创作者的初心&#xff1a;整理自己的知识体系&#xff0c;普及前端知识 实战项目中的经验分享日常工作学习过程中的记录通过文章进行技术交流归纳和整理自己的知识体系 收获 创作的过程中收获&#xff1a; 获得了909粉丝的关注获得了很多正向的反馈&#xff0c…...

MySQL为什么要用B+树?

二叉树&#xff08;二叉查找树&#xff09; 平衡二叉树&#xff08;B树就是B-树&#xff09;(解决了二叉查找树的极端情况&#xff09; Q&#xff1a;具体是怎么解决的呢&#xff1f; A&#xff1a; 树左右两边层数相差不大于1一旦符合条件1的时候&#xff0c;就进行左旋/右…...

今天分享一个好看的输入法皮肤相信每个人心里住着一个少女心我们美化一下她吧

标题&#xff1a; 白日梦皮肤上线&#xff0c;百度输入法助你开启梦幻之旅&#xff01; 正文&#xff1a; 大家好呀&#xff01;今天我来给大家安利一款超级梦幻的百度输入法皮肤——“白日梦”系列&#xff01; 这款皮肤的设计灵感来源于我们内心深处的白日梦&#xff0c;充…...

SpringBoot-17-MyBatis动态SQL标签之常用标签

文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...

网络编程(Modbus进阶)

思维导图 Modbus RTU&#xff08;先学一点理论&#xff09; 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议&#xff0c;由 Modicon 公司&#xff08;现施耐德电气&#xff09;于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...

深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录

ASP.NET Core 是一个跨平台的开源框架&#xff0c;用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录&#xff0c;以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...

OpenLayers 可视化之热力图

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 热力图&#xff08;Heatmap&#xff09;又叫热点图&#xff0c;是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...

C++:std::is_convertible

C++标志库中提供is_convertible,可以测试一种类型是否可以转换为另一只类型: template <class From, class To> struct is_convertible; 使用举例: #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...

React Native 导航系统实战(React Navigation)

导航系统实战&#xff08;React Navigation&#xff09; React Navigation 是 React Native 应用中最常用的导航库之一&#xff0c;它提供了多种导航模式&#xff0c;如堆栈导航&#xff08;Stack Navigator&#xff09;、标签导航&#xff08;Tab Navigator&#xff09;和抽屉…...

前端倒计时误差!

提示:记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来?二、五大解决方案1. 动态校准法(基础版)2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...

使用van-uploader 的UI组件,结合vue2如何实现图片上传组件的封装

以下是基于 vant-ui&#xff08;适配 Vue2 版本 &#xff09;实现截图中照片上传预览、删除功能&#xff0c;并封装成可复用组件的完整代码&#xff0c;包含样式和逻辑实现&#xff0c;可直接在 Vue2 项目中使用&#xff1a; 1. 封装的图片上传组件 ImageUploader.vue <te…...

【AI学习】三、AI算法中的向量

在人工智能&#xff08;AI&#xff09;算法中&#xff0c;向量&#xff08;Vector&#xff09;是一种将现实世界中的数据&#xff08;如图像、文本、音频等&#xff09;转化为计算机可处理的数值型特征表示的工具。它是连接人类认知&#xff08;如语义、视觉特征&#xff09;与…...

GitHub 趋势日报 (2025年06月08日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...