Vue3踩坑记录
目录
一、定义常变量
1.1、ref和reactive到底用谁?
二、双向绑定
2.1、直接改变表格该行数据
2.1、在弹窗改变表格该行数据
一、定义常变量
1.1、ref和reactive到底用谁?
已知:使用ref定义基础类型数据;使用reactive定义复杂对象或数组;
const items = reactive<string[]>([]);const updateItems= () => {//以下都会报错 'items' is constantitems = []items = res.data.items
};
报错原因:
reactive
的常量不能直接重新赋值,可以通过修改数组内容来更新数据。
解决方法:
(1)、替换数组中的所有元素
items.length = 0; // 清空数组items.splice(0, items.length); // 清空数组Object.assign(items, []); //创建一个新的数组并赋值给 itemsitems.push(...res.data.items)
(2)、ref
支持重新赋值
const items = ref<string[]>([]);const updateItems= () => {items.value = []; // 重新赋值整个数组
}
备注:
如果是对象:除非用ref,否则只能这样逐个赋值,且用 let 进行定义。
for (let key in res.data) {editForm[key] = res.data[key];}
二、双向绑定
2.1、直接改变表格该行数据
<el-table height="100%" border class="mt20" size="large" v-loading="pager.loading" :data="tableData"><el-table-column label="工厂" prop="factoryCode" header-align="center" align="center" show-overflow-tooltip /><el-table-column label="设计记录sku" prop="sku" width="200" header-align="center" align="center"show-overflow-tooltip /><el-table-column label="格式" prop="sc_img_type" show-overflow-tooltip header-align="center" align="center"><template #default="{ row }"><el-tag v-if="row.sc_img_type == 1">JPG</el-tag><el-tag v-if="row.sc_img_type == 2">SVG</el-tag><el-tag v-if="row.sc_img_type == 3">TIFF</el-tag></template></el-table-column><el-table-column label="创建时间" width="180" prop="create_time" show-overflow-tooltip header-align="center"align="center"></el-table-column><el-table-column label="操作" show-overflow-tooltip header-align="center" align="center"><template #default="{ row }"><el-button type="primary" @click="updateRow(row)">编辑</el-button></template></el-table-column>
</el-table>
<script lang="ts" setup>
const updateRow = (row) => {row.factoryCode = "改变工厂名称";
};
</script>
updateRow(row) {row.name = '改变后的名称'; // 修改传入的 row 对象
}
总结:
因为
tableData
是响应式的,Vue3 会把它内部的每一项(即row
)都变成响应式对象。当你修改其中的属性
时,Vue3 会通过代理(Proxy
)检测到这个属性的变化,并更新 DOM。因为
row
是响应式对象,访问/修改row.name,
Vue2 会触发getter或setter,从而通知视图更新。Vue 2 的响应式系统是基于Object.defineProperty
实现的,它会使得对象的每个属性都变成 getter 和 setter,从而实现双向绑定。
2.1、在弹窗改变表格该行数据
表格数据显示在弹窗内时要注意:
<script lang="ts" setup>// =======================用reactive定义
let form = reactive({factoryCode: "",sku: "",
});
const updateRow = (row) => {form= row;form = JSON.parse(JSON.stringify(row));// 逐个赋值【数据过多用for...in...】,上面两种都不对form.factoryCode = row.factoryCode;form.sku = row.sku;form.factoryCode ="改变它";//弹窗里会变,表格不会dialogFormVisible.value = true;
};// =======================用ref定义
let form = ref({factoryCode: "",sku: "",
});
const updateRow = (row) => {form.value= row;dialogFormVisible.value = true;
};
</script>
通过
form.factoryCode
修改数据时,它并没有直接修改tableData
中的对应数据项,而只是更新了form
中的数据。如果你希望tableData
中的某个项随着form
的改变而自动反映更新,需要做显式的修改【后端接口更新/自己改变tableData
】。
但是在vue2里,却是可以直接改变的。
methods: {handleSelectionChange(val) {this.multipleSelection = valthis.multipleSelection[0].name = '改变后的名称002' //这里一变,tableData也会变},updateRow(row) {this.form = rowthis.form.name = '改变后的名称' //这里一变,row就会变,tableData也会变this.dialogFormVisible = true}}
如果你不想修改
row
对象本身,而只想在this.form
上进行修改:this.form = { ...row } // 使用展开运算符创建 row 的浅拷贝
this.form = Object.assign({}, row) // 使用 Object.assign 创建 row 的浅拷贝
总结:
vue2:
this.form = row
这样的赋值操作,让它俩指向的是同一个内存地址,所以一变全都变;vue3:
form.value = row
这里的form
是一个响应式引用,而row
只是一个普通的对象,form
和row
是不同的引用,修改form.value
并不会直接影响row;
非要一起变,只能Object.assign(form, tableData[index]);
......待更新
相关文章:

Vue3踩坑记录
目录 一、定义常变量 1.1、ref和reactive到底用谁? 二、双向绑定 2.1、直接改变表格该行数据 2.1、在弹窗改变表格该行数据 一、定义常变量 1.1、ref和reactive到底用谁? 已知:使用ref定义基础类型数据;使用reactive定义复…...

大数据-227 离线数仓 - Flume 自定义拦截器(续接上节) 采集启动日志和事件日志
点一下关注吧!!!非常感谢!!持续更新!!! Java篇开始了! 目前开始更新 MyBatis,一起深入浅出! 目前已经更新到了: Hadoop࿰…...

【热门主题】000054 ECMAScript:现代 Web 开发的核心语言
前言:哈喽,大家好,今天给大家分享一篇文章!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏关注哦 💕 目录 【热…...
【Pytorch】torch.nn.functional模块中的非线性激活函数
在使用torch.nn.functional模块时,需要导入包: from torch.nn import functional 以下是常见激活函数的介绍以及对应的代码示例: tanh (双曲正切) 输出范围:(-1, 1) 特点:中心对称,适合处理归一化后的数据…...
reactflow 中 useNodesState 模块作用
1. 节点状态管理核心功能 useNodesState是一个关键的钩子函数,用于专门管理节点(Nodes)的状态。节点是流程图的核心元素,它们可以代表各种实体,如流程中的任务、系统中的组件或者数据结构中的元素。 useNodesState提…...
Go语言内存分配源码分析学习笔记
大家好,我是V 哥。GO GO GO,今天来说一说Go语言内存分配问题,Go语言内存分配的源码主要集中在runtime包中,它实现了Go语言的内存管理,包括初始化、分配、回收和释放等。下面来对这些过程详细分析一下,先赞后…...
【jvm】方法区常用参数有哪些
目录 1. -XX:PermSize2. -XX:MaxPermSize3. -XX:MetaspaceSize(Java 8及以后)4. -XX:MaxMetaspaceSize(Java 8及以后)5. -Xnoclassgc6. -XX:TraceClassLoading7.-XX:TraceClassUnLoading 1. -XX:PermSize 1.设置JVM初始分配的永久…...

JAVA环境的配置
首先找到JDK环境的官网。 Java Archive Downloads - Java SE 8u211 and laterhttps://www.oracle.com/java/technologies/javase/javase8u211-later-archive-downloads.html 我下载的最后一个x64.exe,下载后,直接双击运行,我这里默认安装到…...

LLM文档对话 —— pdf解析关键问题
一、为什么需要进行pdf解析? 最近在探索ChatPDF和ChatDoc等方案的思路,也就是用LLM实现文档助手。在此记录一些难题和解决方案,首先讲解主要思想,其次以问题回答的形式展开。 二、为什么需要对pdf进行解析? 当利用L…...
MySQL单表查询时索引使用情况
本文针对 MySQL 单表查询时索引使用的几种场景情况进行分析。 假设有一个表如下: CREATE TABLE single_table (id INT NOT NULL AUTO_INCREMENT,key1 VARCHAR(100),key2 INT,key3 VARCHAR(100),key_part1 VARCHAR(100),key_part2 VARCHAR(100),key_part3 VARCHAR(1…...

Qt邮箱程序改良版(信号和槽)
上一版代码可以正常使用,但是会报错 上一篇文章 错误信息 "QSocketNotifier: Socket notifiers cannot be enabled or disabled from another thread" 指出了一个问题,即在非主线程中尝试启用或禁用套接字通知器(QSocketNotifier)…...

入门到精通mysql数据(四)
5、运维篇 5.1、日志 5.1.1、错误日志 错误日志是MySQL中最重要的日志之一,它记录了当mysqld启动和停止,以及服务器在运行过程中发生任何严重错误时的相关信息。当数据库出现任何故障导致无法正常使用时,建议首先查看此日志。 该日志是默认开启的,默认存放目录/var/log…...
Java 设计模式 详解
在Java开发中,设计模式是一种常见的、成熟的解决方案,用于应对特定的设计问题和复杂性管理。以下是一些常用的设计模式,它们可以分为三类:创建型模式、结构型模式和行为型模式。 一、创建型模式 创建型模式主要负责对象的创建&a…...

卡尔曼滤波学习资料汇总
卡尔曼滤波学习资料汇总 其实,当初的目的,是为了写 MPU6050 的代码的,然后不知不觉学了那么多,也是因为好奇、感兴趣吧 有些还没看完,之后笔记也会同步更新的 学习原始材料 【卡尔曼滤波器】1_递归算法_Recursive P…...

linux003.在ubuntu中安装cmake的方法
1.cmake安装程序下载 https://cmake.org/files/v3.30/ 2.解压并下载包 解压cmake压缩包 tar -xvzf cmake.tar.gz进入解压目录 cd cmake-<version>编辑~/.bashrc nano ~/.bashrc在文件的末尾添加如下代码 export PATH/home/xwl/software/cmake/bin:$PATH然后运行以…...

EtherNet/IP转Profinet网关连接发那科机器人配置实例解析
本案例主要展示了如何通过Ethernet/IP转Profinet网关实现西门子1200PLC与发那科搬运机器人的连接。所需的设备有西门子1200PLC、开疆智能Ethernet/IP转Profinet网关以及Fanuc机器人。 具体配置步骤:打开西门子博图配置软件,添加PLC。这是配置的第一步&am…...

自动化运维-检测Linux服务器CPU、内存、负载、IO读写、机房带宽和服务器类型等信息脚本
前言:以上脚本为今年8月1号发布的,当时是没有任何问题,但现在脚本里网络速度测试py文件获取不了了,测速这块功能目前无法实现,后面我会抽时间来研究,大家如果有建议也可以分享下。 脚本内容: #…...
ubuntu24.04设置开机自启动Eureka
ubuntu24.04设置开机自启动Eureka 之前我们是在/root/.bashrc的文件中增加了一条命令 nohup java -jar /usr/software/eurekaServer-auth-prd-03.jar > /usr/software/log.log 2>&1 &但上面这条命令只有在登录root的用户时,才会执行,如果…...

从视频帧生成点云数据、使用PointNet++模型提取特征,并将特征保存下来的完整实现。
文件地址 https://github.com/yanx27/Pointnet_Pointnet2_pytorch?spm5176.28103460.0.0.21a95d27ollfze Pointnet_Pointnet2_pytorch\log\classification\pointnet2_ssg_wo_normals文件夹改名为Pointnet_Pointnet2_pytorch\log\classification\pointnet2_cls_ssg "E:…...
工化企业内部能源能耗过大 落实能源管理
一、精准监测与数据分析 实时准确的数据采集 企业能耗管理系统能够对企业内各种能源(如电、水、气、热等)的使用情况进行实时监测。通过安装在能源供应线路和设备上的智能传感器,可以精确地采集能源消耗的各项数据,包括瞬时流量、…...

8k长序列建模,蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂
蛋白质结合剂(如抗体、抑制肽)在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上,高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术,但这类方法普遍面临资源消耗巨大、研发周期冗长…...

Swift 协议扩展精进之路:解决 CoreData 托管实体子类的类型不匹配问题(下)
概述 在 Swift 开发语言中,各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过,在涉及到多个子类派生于基类进行多态模拟的场景下,…...

UDP(Echoserver)
网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法:netstat [选项] 功能:查看网络状态 常用选项: n 拒绝显示别名&#…...
鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序
一、开发准备 环境搭建: 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 项目创建: File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...
在四层代理中还原真实客户端ngx_stream_realip_module
一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡(如 HAProxy、AWS NLB、阿里 SLB)发起上游连接时,将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后,ngx_stream_realip_module 从中提取原始信息…...

第一篇:Agent2Agent (A2A) 协议——协作式人工智能的黎明
AI 领域的快速发展正在催生一个新时代,智能代理(agents)不再是孤立的个体,而是能够像一个数字团队一样协作。然而,当前 AI 生态系统的碎片化阻碍了这一愿景的实现,导致了“AI 巴别塔问题”——不同代理之间…...
Java 二维码
Java 二维码 **技术:**谷歌 ZXing 实现 首先添加依赖 <!-- 二维码依赖 --><dependency><groupId>com.google.zxing</groupId><artifactId>core</artifactId><version>3.5.1</version></dependency><de…...
Go 并发编程基础:通道(Channel)的使用
在 Go 中,Channel 是 Goroutine 之间通信的核心机制。它提供了一个线程安全的通信方式,用于在多个 Goroutine 之间传递数据,从而实现高效的并发编程。 本章将介绍 Channel 的基本概念、用法、缓冲、关闭机制以及 select 的使用。 一、Channel…...
MySQL JOIN 表过多的优化思路
当 MySQL 查询涉及大量表 JOIN 时,性能会显著下降。以下是优化思路和简易实现方法: 一、核心优化思路 减少 JOIN 数量 数据冗余:添加必要的冗余字段(如订单表直接存储用户名)合并表:将频繁关联的小表合并成…...
WebRTC从入门到实践 - 零基础教程
WebRTC从入门到实践 - 零基础教程 目录 WebRTC简介 基础概念 工作原理 开发环境搭建 基础实践 三个实战案例 常见问题解答 1. WebRTC简介 1.1 什么是WebRTC? WebRTC(Web Real-Time Communication)是一个支持网页浏览器进行实时语音…...