Vue 深拷贝：把对象赋给另一个变量，修改新变量，原对象也改变

已于 2024-03-21 13:59:50 修改
阅读量935 收藏
点赞数 1
分类专栏： 笔记 文章标签： vue.js
于 2021-04-27 19:58:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46664771/article/details/116208722
版权

把对象先转成字符串,再把字符串转成对象，再进行赋值给新变量
此时再改变新变量，原对象就不会变了

var value = JSON.parse(JSON.stringify(object.value));

感谢这篇博客
https://www.cnblogs.com/sjxx/p/10414506.html

Rrriobun
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue(第十七课)AXIOS对JSON数据的增删改查
qq_56248592的博客
12-04 2958
Vue中的axios数据的增删改查
Vue开发之watch监听数组、对象、变量操作分析
01-19
本文实例讲述了Vue开发之watch监听数组、对象、变量操作。分享给大家供大家参考，具体如下： 1.普通的watch data() { return { frontPoints: 0 } }, watch: { frontPoints(newValue, oldValue) { console.log(newValue) } } 2.数组的watch：深拷贝 data() { return { winChips: new Array(11).fill(0) } }, watch: { 　　winChips: { 　　　　handler(ne
浅拷贝和深拷贝深入理解(shallow copy VS deep copy)
12-25
引言C#中有两种类型变量，一种 是值类型变量，一种是引用类型变量,对于值类型变量，深拷贝和前拷贝都是通过赋值操作符号(=)实现，其效果一致，将对象中的值类型的字段拷贝到新的对象中.这个很容易理解。 本文重点讨论引用类型变量的拷贝机制和实现。 C#中引用类型对象的copy操作有两种： •浅拷贝(影子克隆/shallow copy):只复制对象的值类型字段,对象的引用类型,仍属于原来的引用.•深拷贝(深度克隆):不仅复制对象的值类型字段,同时也复制原对象中的对象.就是说完全是新对象产生的. 浅拷贝和深拷贝之间的区别：浅拷贝是指将对象中的数值类型的字段拷贝到新的对象中，而对象中的引用型字段则指复
vue 使用lodash实现对象数组深拷贝操作
11-19
我就废话不多说了，大家还是直接看代码吧~ [removed] export default { mounted() { this.init(); }, methods: { init() { let lodash = require('lodash'); let obj1 = { a: 1, b: { f: { g: 1 } }, c: [1, 2, 3], h: () => { return 123; }, k: undefined
vue3变量赋值后，修改一个，原来的变量也被修改
前端小白到专家的博客
04-14 4107
问题描述 提示：这里描述具体问题：在vue3开发时遇到有一个大坑，在一个变量给另一个变量赋值后，修改一个变量。另一个变量同时被修改。 例如： const a = ref('123') const b = ref('234') a.value = b.value a.value.length = 0 //当前a是空，b也是空 原因分析： 提示：这里填写问题的分析：值传递还是引用传递，当前的赋值为引用传递。 解决方案： 提示：这里填写该问题的具体解决方案：用JSON.stringify和JSON.
Vue加载json文件
Upxuans的博客
03-12 2557
Vue加载json文件 链接: https://www.cnblogs.com/xsphehe/p/6938438.html.
vue中请求到的数据赋值给data 对象
热门推荐
zhusixu的博客
11-22 3万+
在写vue的项目时，用axios请求到的数据，直接赋值给data对象，当修改data对象里面的数据，请求到的数据也会改变 _this.detailData是data对象里面的数据，response.data.data是请求到的数据，当修改_this.detailData里面的数据时，response.data.data里面数据也会改变，如下图，这不是我们想要的，这就涉及到深拷贝和浅拷贝的问题，具...
JS变量之间赋值，修改变量值，原变量会随之改变的问题
m0_48334955的博客
07-31 831
我们期待的是，B从A变量copy出一份数据，变成两份一样的基础数据，操作B而不影响A，让A始终保持原滋原味。期望的效果是，赋值之后，A和B是两份数据，对变量B进行操作时不影响变量A，结果发现想的是一回事，敲出来的完全是另一回事，修改B变量时A变量也跟着改变了。开发vue项目的过程中，需要多次用到一份基础数据，为减少代码量，提高一下复用效果，便用变量A来定义，在项目中需要用到时就用变量A进行赋值。在项目中调用时，新定义一个变量B，再将变量A赋值给变量B，即B=A；
vue 获取本地的json文件
qq_43159578的博客
09-10 1541
很多时候我们需要从本地读取JSON文件里面的内容，但是找了很久我都沒有找到比较实用的；所以分享一下我的vue获取本地json文件的方法。 我的项目结构 获取方法 其实就是用模拟get请求的方法拿到json文件，然后再解析，但是在这之前我们需要对请求头做一下处理，否则拿不到文件 const newInstance = this.$ajax.create({ baseURL: '', time..
VUE调用本地json的使用方法
浮萍的博客
08-14 2万+
  开始的时候我以为，用vue去调取json要多么的麻烦，完咯就先去的百度，找了几个，看上面又要配置这配置那的，看的我都头大，像一些思维逻辑清晰的肯定不会出现这种情况。 下面我说下我这的情况，大家依情况代入 当然vue你刚开始创建的话，你是要去配置下东西，下面我说的是你的项目能够跑起来的情况，完咯再去想办法去引用json，当然我这里用的也是axios的获取方法，如果不是这种方法的可以带过了 ...
JS赋值、浅拷贝和深拷贝（数组和对象的深浅拷贝）实例详解
11-20
但深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。 赋值和浅拷贝的区别 当我们把一个对象赋值给一个新的变量时，赋的其实是该对象的在栈中的地址，而不是堆中的数据。也...
小程序新赋值的变量修改后，原始变量也会修改
zepcjsj0801的博客
12-14 1090
这个问题真的不好描述，所以不好搜索原因。 遇到这个问题的情况绝大部分是在小程序的开发过程中，因为web的开发很好少会有直接操作对象的，即使是有这种情况，我也会多写两行代码，跳过对象的操作（当然这个时候我还不知道具体因为什么）。 在做一个小程序项目的时候，操作数据面对的大部分是对象，但是在把一个数据赋值给一个新变量，在修改新变量后，原始的数据也跟着修改了。这个问题起始已经困扰我大半年了，上次出现这种情况是在做uni-app时遇到的，我以为是这是dclouod特有的，因为这个我放弃了dcolud（缺乏基础理论是
vue引用传递——赋值后，新变量数据改变，原变量的数据也随之改变了
weixin_39709920的博客
03-21 1287
JSON.stringify 将一个 JavaScript 值(对象或者数组)转换为一个 JSON 字符串。JSON.parse 用来解析 JSON 字符串，将数据转换为 JavaScript（对象或者数组）本来需要的是this.updateForm的值始终不变，只有updateQuery的值在变化。updateQuery的值发生变化时，this.updateForm的值也随之改变了。在vue中，数组和对象传递都是引用传递。赋值时传递的并不是值，而是指向了同一个空间。
vue中如何将json数组指定的key赋值给el-form-item并均匀的分成2列
最新发布
陈海明 -全栈
11-13 395
在上面的示例中，我们使用el-row和el-col来创建一个栅格布局。通过设置el-col的span属性为6，我们将JSON数组均匀分成四列（每列占据栅格系统的1/4）。这样，JSON数组中的每个对象都会在栅格布局中占据一个el-col，并且均匀分布在四列中。你可以根据需要调整span属性的值来实现不同的布局效果。在Vue中，你可以使用v-for指令来遍历JSON数组，并将指定的key赋值给el-form-item。
【VUE】vue声明json对象自定义key,value值
liuxiaowei
01-22 1万+
1、定义一个对象，和一个数组，如下 //定义一个对象 let jsonObject = {}; //定义一个数组 let json = [ { key: "keyword1", value: "value1", }, { key: "keyword2", value: "value2", }, { key: "key...
vue 后端返回的json 对象 解构赋值 给定义的 data对象记录
tang_jian_dong的博客
06-23 8682
定义了一个sjForm对象 后端返回的json对象： 也可以下面这样 这是个es6里面的方法，比较简单，就是Object.assign，如下图，再修改data对象里面的数据，response.data.data就不会改变。Object.assign只试用于response.data.data对象里面非对象的数据，如果是对象，也会改变。 转载:https:...
Vue解决赋值后修改新数组、对象会影响原数组、对象
qq_44100778的博客
08-25 3706
当我们把一个对象赋值给一个新的变量时，赋的其实是该对象的在栈中的地址，而不是堆中的数据。也就是两个对象指向的是同一个存储空间，无论哪个对象发生改变，其实都是改变的存储空间的内容，因此，两个对象是联动的。所以为了实现修改新对象而不影响原对象，我们需要进行深拷贝。 深拷贝 JSON.parse(JSON.stringify()) computed: { data: function () { var obj={}; obj=JSON.parse(JS
【vue】将对象部分属性赋值给新对象
qq_37219845的博客
09-24 3932
【vue】将对象部分属性赋值给新对象方法一方法二 obj1{ a:1; b:2 c：3 } 假设去除对象obj的属性a 方法一 this.obj2 = Object.keys(this.obj1).reduce( (object, key) => { if (key !== "a") { object[key] = this.obj1[key]; } return object;
vue一个对象给另一个对象赋值之后 修改后者会影响前者的值
Fishman113的博客
08-18 3745
遇到一个问题： 从列表中取出一行数据将它付给一个查看修改详情的页面做出修改之后，并未点击保存到数据库中，点击取消按钮，回到刚才的列表页会发现方才列表的哪一行数据会被修改。重新加载数据就会变为原值。 原来vue同java语言类似对象赋值之后 只是将地址指向同一块内存空间，A=B AB指向同一块内存地址修改B后A所指向的地址的值也会发生改变。在java中可以重新new 一个对象，或者深度拷贝一个对象。 vue中也是如此。 解决方法：this.A=JSON.parse(JSON.stringify(this.B
vue新建一个对象，老对象对新对象赋值，但是新对象改动后老对象也会改变
05-31
当你将一个对象赋值给另一个变量时，实际上是将该对象的引用复制给了新变量，这意味着两个变量引用的是同一个对象。因此，如果你修改对象的一个属性，无论是通过新变量还是旧变量，都会反映在对象本身上。 要避免...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值