新数据不影响原来的数据

问题描述

新数据修改时,原来的数据也会受影响

const obj1 = ref({ name: 'slx', age: 20 })const obj2 = obj1obj2.value.name = 'hhhh'console.log('obj1', obj1.value)console.log('obj2', obj2.value)

在这里插入图片描述

解决方法 (仅适用于对象

在这段代码中,obj1obj2 指向同一个响应式对象,因此修改 obj2 中的属性会同步反映到 obj1 中,导致原始对象被修改。如果需要修改 obj2 而不影响到 obj1,可以尝试以下 3 种方法:

  1. 手动复制新的对象

    const obj2 = ref({ ...obj1.value })
    obj2.value.name = 'hhhh'
    console.log('obj1', obj1.value)
    console.log('obj2', obj2.value)
    

    这种方式通过手动复制每个属性来创建一个新的对象,确保 obj1obj2 不再引用同一个对象,从而实现修改 obj2 而不影响 obj1
    在这里插入图片描述

  2. 使用 Object.assign 复制对象

    const obj2 = ref(Object.assign({}, obj1.value))
    obj2.value.name = 'hhhh'
    console.log('obj1', obj1.value)
    console.log('obj2', obj2.value)
    

    这种方式使用 Object.assignobj1 中的属性复制到一个新的对象中,并将其赋值给 obj2。由于 Object.assign 会创建一个新的对象,因此 obj1obj2 引用的是不同的对象,修改 obj2 不会影响到 obj1
    在这里插入图片描述

  3. 使用 lodash 库的 clone 方法复制对象

    import { clone } from 'lodash'
    const obj2 = ref(clone(obj1.value))
    obj2.value.name = 'hhhh'
    console.log('obj1', obj1.value)
    console.log('obj2', obj2.value)
    

    这种方式使用 lodash 库中的 clone 方法来复制对象。由于 clone 会创建一个新的对象,因此 obj1obj2 引用的是不同的对象,修改 obj2 不会影响到 obj1

希望这些方法能够帮助你解决问题。如果还有其他问题,请随时提问。

数组解决方法

问题描述

当数据是数组包对象时,就不好用

 const arr1 = ref([{ id: 1, name: 'slx', count: 2 },{ id: 2, name: 'slx', count: 8 }])//   const obj2 = obj1const arr2 = ref([...arr1.value])arr2.value[0].name = '庆余年'console.log('arr1', arr1.value)console.log('arr2', arr2.value)

在这里插入图片描述

解决👇

在这段代码中,obj1obj2 都是响应式对象,并且指向同一个数据数组。因此,修改 obj2 中的数据会同步反映到 obj1 中,导致原始数据被修改。如果需要修改 obj2 而不影响到 obj1,可以尝试以下 方法:

  1. 手动复制新的数据对象

    const obj2 = ref([{ ...obj1.value[0] },{ ...obj1.value[1] }
    ])
    obj2.value[0].name = '庆余年'
    console.log('obj1', obj1.value)
    console.log('obj2', obj2.value)
    

    这种方式通过手动复制每个数据对象来创建一个新的数组,确保 obj1obj2 不再引用同一个数据对象,从而实现修改 obj2 而不影响 obj1
    在这里插入图片描述

  2. 使用 JSON 序列化和反序列化复制数组

    const obj2 = ref(JSON.parse(JSON.stringify(obj1.value)))
    obj2.value[0].name = '庆余年'
    console.log('obj1', obj1.value)
    console.log('obj2', obj2.value)
    

    这种方式使用 JSON 序列化和反序列化操作来复制数组,即先将 obj1 转换为 JSON 字符串,再将其解析为数组对象。由于这个过程中会创建一个新的数组对象,因此 obj1obj2 引用的是不同的数组对象,修改 obj2 不会影响到 obj1

  3. 使用 lodash 库的 cloneDeep 方法复制数组

    import { cloneDeep } from 'lodash'
    const obj2 = ref(cloneDeep(obj1.value))
    obj2.value[0].name = '庆余年'
    console.log('obj1', obj1.value)
    console.log('obj2', obj2.value)
    

    这种方式使用 lodash 库中的 cloneDeep 方法来深度复制数组。由于 cloneDeep 会创建一个新的数组对象,因此 obj1obj2 引用的是不同的数组对象,修改 obj2 不会影响到 obj1

希望这些方法能够帮助你解决问题。如果还有其他问题,请随时提问。

简单的数组

使用 Array.from 复制数组

const array1 = ref([1, 2, 3, 4])
//   const array2 = array1
const array2 = ref(Array.from(array1.value))
array2.value[0] = 13234
console.log('array1', array1.value)
console.log('array2', array2.value)

这种方式使用 Array.from 将 array1 中的数据复制到一个新的数组中,并将其赋值给 array2。由于 Array.from 会创建一个新的数组对象,因此 array1array2 引用的是不同的数组对象,修改 array2 不会影响到 array1

在这里插入图片描述

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

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

相关文章

【Python基础】文件详解(文件基础、csv文件、时间处理、目录处理、excel文件、jsonpicke、ini配置文件)

文章目录 (一)文件详解1 快速入门文件操作1.1 快速实现文件读取1.2 快速实现文件写入 2 文件打开方式详解2.1 open方法2.2 打开方式2.3 文件读写操作2.3.1 基本读写2.3.2 读写方式打开2.3.3 实现重复读取 3 文件编码问题4 文件读写方法4.1 文件读取方式4…

【PTA编程题】7-1 保持链表有序

对于输入的若干学生的信息,按学号顺序从小到大建立有序链表,最后遍历链表,并按顺序输出学生信息。 输入格式: 首先输入一个正整数T,表示测试数据的组数,然后是T组测试数据。每组测试数据首先输入一个正整数n&#xf…

IT行业证书的获取与价值:提升职业竞争力的关键

目录 IT行业证书的价值和作用 1. Cisco(思科)认证(如CCNA、CCNP、CCIE): 2. 微软认证(如MCSA、MCSE、MCSD): 3. 计算机网络技术(CompTIA Network、CompTIA Security&a…

《汇编语言》- 读书笔记 - 各章检测点归档

《汇编语言》- 读书笔记 - 各章检测点归档 检测点 1.1检测点 2.1检测点 2.2检测点 2.3检测点 3.1检测点 3.2检测点 6.1检测点 9.1 检测点 1.1 1个CPU 的寻址能力为8KB,那么它的地址总线的宽度为 13 。 解:8KB 8192B 213 1KB的存储器有 10…

构建高效直播美颜系统:美颜SDK集成与性能优化指南

如今,美颜技术的广泛应用成为各类直播平台的标配之一。今天,小编将与大家进一步讨论如何构建高效的直播美颜系统,重点关注美颜SDK的集成和性能优化方面。 一、美颜SDK的选择与集成 选择合适的美颜SDK是构建高效直播美颜系统的第一步。不同的…

MATLAB频域分析(附完整代码)

1. MATLAB进行频域分析举例 以下是一个使用MATLAB进行频域分析的例子。在这个例子中,我们将生成一个含有两个不同频率分量的信号,然后使用快速傅里叶变换(FFT)来分析其频域特性。 main.m文件 clc;close all;clear all;warning of…

12. onnx转为rknn测试时有很多重叠框的修改(python)

我们下载rknn-toolkit2-master后并进行前面的处理后,进入到rknn-toolkit2-master\examples\onnx\yolov5文件夹,里面有个test.py文件,打开该文件,其代码如下: # -*- coding: utf-8 -*- # coding:utf-8import os import…

msvcp120.dll丢失如何解决/找不到msvcp120.dll的5种有效的解决方法

在计算机系统运行过程中,如果遇到“找不到msvcp120.dll”的提示信息,这代表了何种具体状况呢?首先,我们需要明确msvcp120.dll文件的重要性。msvcp120.dll是Microsoft Visual C Redistributable Package的一部分,这是一…

工作与生活平衡:在生活中寻找和谐

工作和生活是我们生活中不断交织的两个重要方面。对许多人来说,找到两者之间的完美平衡已经成为一个持久的挑战。然而,与其专注于平衡,更重要的是要认识到工作和生活并不是可以相互平衡的两个分离实体,而是一个相互影响的循环。正…

[word] word小数点对齐怎么设置 #微信#其他#其他

word小数点对齐怎么设置 使用Word编辑文档的时候,如果有小技巧的话,可以解决很多遇到的问题,也让工作更高效的完成,下面给大家分享word小数点对齐怎么设置的小技巧。 1、设置格式 选中内容,点击段落一一制表符&#…

扩展鸿蒙textinput组件

扩展鸿蒙textinput组件,支持快速扩展展性,标题文本等,文本内容双向绑定、文本组件快速复用。 组件代码 /*** 单选文本*/ Component export default struct DiygwInput{//绑定的值Link value:string;//未选中图标State labelImg: Resource …

探索虚拟与增强现实的无限可能:塑造未来的生活体验

美国当地时间2月2日,苹果首款头显Vision Pro正式上市,当天,在员工高喊“AVP(Apple Vision Pro)”呼声中,苹果首席执行官蒂姆‧库克(Tim Cook)在位于纽约曼哈顿第五大道的苹果旗舰店开…

ShardingSphere 5.x 系列【3】分库分表中间件技术选型

有道无术,术尚可求,有术无道,止于术。 本系列Spring Boot 版本 3.1.0 本系列ShardingSphere 版本 5.4.0 源码地址:https://gitee.com/pearl-organization/study-sharding-sphere-demo 文章目录 1. 前言2. My Cat3. ShardingSphe…

Docker 一小时从入门到实战 —— Docker commands | Create your own image | vs VM ... 基本概念扫盲

Docker crash course 文章目录 Docker crash course1. What and Why of Docker?2.1 What2.2 What problem does it solve?2.2.1 before containers2.1.2 with containers 2. Docker vs Virtual Machines2.1 Difference2.2 Benefits 3. Install docker locally4. Images vs Co…

【CSS】外边距折叠(margin 塌陷)

外边距折叠(collapsing margins) 毗邻的两个或多个margin会合并成一个margin,叫做外边距折叠。 规则如下: 两个或多个毗邻的普通流中的块元素垂直方向上的 margin会折叠浮动元素 / inline-block元素 / 绝对定位元素 / 行内元素的margin不会和垂直方向上的其他元素…

【网站项目】046人事管理信息系统

🙊作者简介:拥有多年开发工作经验,分享技术代码帮助学生学习,独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。🌹赠送计算机毕业设计600个选题excel文件,帮助大学选题。赠送开题报告模板&#xff…

锁优化的方法

减少锁持有时间 减少锁粒度 将大对象拆分成小对象,增加并行度,降低锁竞争。ConcurrentHashMap允许多个线程同 时进入 锁分离 根据功能进行锁分离ReadWriteLock在读多写少时,可以提高性能。 锁消除 锁消除是发生在编译器级别的一种锁优化…

解放网工双手-SNMP如何做好运维辅助?

1. SNMP为什么被誉为“网管神器”? 2. SNMP不同版本有何区别? 3. SNMP有哪些问题及Telemetry有何优势? ---- SNMP ----- 简单网络管理协议 U2000:传输设备管理 企业,银行 esight:华为 iMaster NCE-Camp…

编码世界探秘:原反补码与实数表示,含定点、浮点及BCD编码

数值的编码表示 整数编码表示 在计算机中,因为只有0和1这两种形式,但为了表示数的正(),负(-)号,就要将数的符号以0和1编码。 通常把一个数的最高位定义为符号位,用0表…

#Z0458. 树的中心2

题目 代码 #include <bits/stdc.h> using namespace std; struct ff {int z,len; }; vector<ff> vec[300001]; int n,u,v,w,dp[300001][2],ans 1e9; void dfs(int x,int fa) {for(int i 0;i < vec[x].size();i){ff son vec[x][i];if(son.z ! fa){dfs(son.z,…