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

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只是一个普通的对象,formrow是不同的引用,修改form.value并不会直接影响 row;非要一起变,只能Object.assign(form, tableData[index]);

......待更新

相关文章:

Vue3踩坑记录

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

大数据-227 离线数仓 - Flume 自定义拦截器(续接上节) 采集启动日志和事件日志

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; Java篇开始了&#xff01; 目前开始更新 MyBatis&#xff0c;一起深入浅出&#xff01; 目前已经更新到了&#xff1a; Hadoop&#xff0…...

【热门主题】000054 ECMAScript:现代 Web 开发的核心语言

前言&#xff1a;哈喽&#xff0c;大家好&#xff0c;今天给大家分享一篇文章&#xff01;并提供具体代码帮助大家深入理解&#xff0c;彻底掌握&#xff01;创作不易&#xff0c;如果能帮助到大家或者给大家一些灵感和启发&#xff0c;欢迎收藏关注哦 &#x1f495; 目录 【热…...

【Pytorch】torch.nn.functional模块中的非线性激活函数

在使用torch.nn.functional模块时&#xff0c;需要导入包&#xff1a; from torch.nn import functional 以下是常见激活函数的介绍以及对应的代码示例&#xff1a; tanh (双曲正切) 输出范围&#xff1a;(-1, 1) 特点&#xff1a;中心对称&#xff0c;适合处理归一化后的数据…...

reactflow 中 useNodesState 模块作用

1. 节点状态管理核心功能 useNodesState是一个关键的钩子函数&#xff0c;用于专门管理节点&#xff08;Nodes&#xff09;的状态。节点是流程图的核心元素&#xff0c;它们可以代表各种实体&#xff0c;如流程中的任务、系统中的组件或者数据结构中的元素。 useNodesState提…...

Go语言内存分配源码分析学习笔记

大家好&#xff0c;我是V 哥。GO GO GO&#xff0c;今天来说一说Go语言内存分配问题&#xff0c;Go语言内存分配的源码主要集中在runtime包中&#xff0c;它实现了Go语言的内存管理&#xff0c;包括初始化、分配、回收和释放等。下面来对这些过程详细分析一下&#xff0c;先赞后…...

【jvm】方法区常用参数有哪些

目录 1. -XX:PermSize2. -XX:MaxPermSize3. -XX:MetaspaceSize&#xff08;Java 8及以后&#xff09;4. -XX:MaxMetaspaceSize&#xff08;Java 8及以后&#xff09;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&#xff0c;下载后&#xff0c;直接双击运行&#xff0c;我这里默认安装到…...

LLM文档对话 —— pdf解析关键问题

一、为什么需要进行pdf解析&#xff1f; 最近在探索ChatPDF和ChatDoc等方案的思路&#xff0c;也就是用LLM实现文档助手。在此记录一些难题和解决方案&#xff0c;首先讲解主要思想&#xff0c;其次以问题回答的形式展开。 二、为什么需要对pdf进行解析&#xff1f; 当利用L…...

MySQL单表查询时索引使用情况

本文针对 MySQL 单表查询时索引使用的几种场景情况进行分析。 假设有一个表如下&#xff1a; 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" 指出了一个问题&#xff0c;即在非主线程中尝试启用或禁用套接字通知器&#xff08;QSocketNotifier&#xff09;…...

入门到精通mysql数据(四)

5、运维篇 5.1、日志 5.1.1、错误日志 错误日志是MySQL中最重要的日志之一,它记录了当mysqld启动和停止,以及服务器在运行过程中发生任何严重错误时的相关信息。当数据库出现任何故障导致无法正常使用时,建议首先查看此日志。 该日志是默认开启的,默认存放目录/var/log…...

Java 设计模式 详解

在Java开发中&#xff0c;设计模式是一种常见的、成熟的解决方案&#xff0c;用于应对特定的设计问题和复杂性管理。以下是一些常用的设计模式&#xff0c;它们可以分为三类&#xff1a;创建型模式、结构型模式和行为型模式。 一、创建型模式 创建型模式主要负责对象的创建&a…...

卡尔曼滤波学习资料汇总

卡尔曼滤波学习资料汇总 其实&#xff0c;当初的目的&#xff0c;是为了写 MPU6050 的代码的&#xff0c;然后不知不觉学了那么多&#xff0c;也是因为好奇、感兴趣吧 有些还没看完&#xff0c;之后笔记也会同步更新的 学习原始材料 【卡尔曼滤波器】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机器人。 具体配置步骤&#xff1a;打开西门子博图配置软件&#xff0c;添加PLC。这是配置的第一步&am…...

自动化运维-检测Linux服务器CPU、内存、负载、IO读写、机房带宽和服务器类型等信息脚本

前言&#xff1a;以上脚本为今年8月1号发布的&#xff0c;当时是没有任何问题&#xff0c;但现在脚本里网络速度测试py文件获取不了了&#xff0c;测速这块功能目前无法实现&#xff0c;后面我会抽时间来研究&#xff0c;大家如果有建议也可以分享下。 脚本内容&#xff1a; #…...

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的用户时&#xff0c;才会执行&#xff0c;如果…...

从视频帧生成点云数据、使用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:…...

工化企业内部能源能耗过大 落实能源管理

一、精准监测与数据分析 实时准确的数据采集 企业能耗管理系统能够对企业内各种能源&#xff08;如电、水、气、热等&#xff09;的使用情况进行实时监测。通过安装在能源供应线路和设备上的智能传感器&#xff0c;可以精确地采集能源消耗的各项数据&#xff0c;包括瞬时流量、…...

前端倒计时误差!

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

JVM垃圾回收机制全解析

Java虚拟机&#xff08;JVM&#xff09;中的垃圾收集器&#xff08;Garbage Collector&#xff0c;简称GC&#xff09;是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象&#xff0c;从而释放内存空间&#xff0c;避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...

C++.OpenGL (10/64)基础光照(Basic Lighting)

基础光照(Basic Lighting) 冯氏光照模型(Phong Lighting Model) #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...

Java编程之桥接模式

定义 桥接模式&#xff08;Bridge Pattern&#xff09;属于结构型设计模式&#xff0c;它的核心意图是将抽象部分与实现部分分离&#xff0c;使它们可以独立地变化。这种模式通过组合关系来替代继承关系&#xff0c;从而降低了抽象和实现这两个可变维度之间的耦合度。 用例子…...

2025年渗透测试面试题总结-腾讯[实习]科恩实验室-安全工程师(题目+回答)

安全领域各种资源&#xff0c;学习文档&#xff0c;以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具&#xff0c;欢迎关注。 目录 腾讯[实习]科恩实验室-安全工程师 一、网络与协议 1. TCP三次握手 2. SYN扫描原理 3. HTTPS证书机制 二…...

群晖NAS如何在虚拟机创建飞牛NAS

套件中心下载安装Virtual Machine Manager 创建虚拟机 配置虚拟机 飞牛官网下载 https://iso.liveupdate.fnnas.com/x86_64/trim/fnos-0.9.2-863.iso 群晖NAS如何在虚拟机创建飞牛NAS - 个人信息分享...

作为测试我们应该关注redis哪些方面

1、功能测试 数据结构操作&#xff1a;验证字符串、列表、哈希、集合和有序的基本操作是否正确 持久化&#xff1a;测试aof和aof持久化机制&#xff0c;确保数据在开启后正确恢复。 事务&#xff1a;检查事务的原子性和回滚机制。 发布订阅&#xff1a;确保消息正确传递。 2、性…...

毫米波雷达基础理论(3D+4D)

3D、4D毫米波雷达基础知识及厂商选型 PreView : https://mp.weixin.qq.com/s/bQkju4r6med7I3TBGJI_bQ 1. FMCW毫米波雷达基础知识 主要参考博文&#xff1a; 一文入门汽车毫米波雷达基本原理 &#xff1a;https://mp.weixin.qq.com/s/_EN7A5lKcz2Eh8dLnjE19w 毫米波雷达基础…...

Qt 事件处理中 return 的深入解析

Qt 事件处理中 return 的深入解析 在 Qt 事件处理中&#xff0c;return 语句的使用是另一个关键概念&#xff0c;它与 event->accept()/event->ignore() 密切相关但作用不同。让我们详细分析一下它们之间的关系和工作原理。 核心区别&#xff1a;不同层级的事件处理 方…...

React从基础入门到高级实战:React 实战项目 - 项目五:微前端与模块化架构

React 实战项目&#xff1a;微前端与模块化架构 欢迎来到 React 开发教程专栏 的第 30 篇&#xff01;在前 29 篇文章中&#xff0c;我们从 React 的基础概念逐步深入到高级技巧&#xff0c;涵盖了组件设计、状态管理、路由配置、性能优化和企业级应用等核心内容。这一次&…...