Vue的浅拷贝与深拷贝

已于 2023-09-18 10:22:48 修改
阅读量53 收藏
点赞数
分类专栏： 前端Vue 文章标签： 前端 vue.js javascript
于 2023-09-05 10:56:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xuan__xia/article/details/131934521
版权

我在前端页面弹窗中对数据进行编辑，页面上的数据会实时发送 变换。

原因在直接使用this.ruleFrom = rowdata，会导致他们共用一个对象，一个发生了变化，另一个也会变化。解决办法，使用深拷贝进行赋值操作。

edit(rowdata){
   this.ruleForm= rowdata,            //错误做法
// this.ruleForm = JSON.parse(JSON.stringify(rowdata)) //深拷贝，避免表单数据和弹窗数据共用一个对象
   
}

vue + element ui 中点击表单编辑，未发起请求，表格数据也跟着改变的问题_elementui 修改表单没提交 table数据变了_胖子又瘦了的博客-CSDN博客

vue中深拷贝的实现方式-火焰兔

chuyufengling
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端面试相关-深拷贝和浅拷贝的实现方法和区别
01-12
前端面试相关-深拷贝和浅拷贝的实现方法和区别
浅拷贝和深拷贝深入理解(shallow copy VS deep copy)
12-25
引言C#中有两种类型变量，一种 是值类型变量，一种是引用类型变量,对于值类型变量，深拷贝和前拷贝都是...浅拷贝和深拷贝之间的区别：浅拷贝是指将对象中的数值类型的字段拷贝到新的对象中，而对象中的引用型字段则指复
JS赋值、浅拷贝和深拷贝（数组和对象的深浅拷贝）实例详解
11-20
本文实例讲述了JS赋值、浅拷贝和深拷贝（数组和对象的深浅拷贝）。分享给大家供大家参考，具体如下： 深拷贝和浅拷贝是只针对Object和Array这样的引用数据类型的。  浅拷贝 只是拷贝了基本类型的数据，而引用类型数据，复制后也是会发生引用，我们把这种拷贝叫做浅拷贝（浅复制） 浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。但深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。 赋值和浅拷贝的区别 当我们把一个对象赋值给一个新的变量时，赋的其实是该对象的在栈中的地址，而不是堆中的数据。也就是两个对象指向的是同一个存储空间，无论哪
Vue父子组件传值的一些坑
01-18
在用 Vue 的父子组件传值时遇到一个冷门的问题，子组件改变值后父组件的值也随之改变了，特此记录下原因和解决方式。 再系统梳理下 JavaScript 的深拷贝与浅拷贝相关知识点。 1. 问题描述 父组件传值给子组件，子组件改变传过来的值后，父组件的值也会跟着改变。 这个问题比较冷门，平时如果对组件通信使用得比较简单，一般不会遇到。 2. 原因剖析 核心：双向绑定 父子组件传值的时候涉及双向绑定，当传值为 object 类型时，传值之后数据源会被改变。 深拷贝与浅拷贝 下文详细讲。 3. 解决方案 我目前采用的解决办法是： 传值的时候不要直接传数据源，而是通过拷贝或者定义新变量等方
vue浅拷贝与深拷贝
热门推荐
w_t_y_y的博客
04-14 1万+
一、数据类型： 数据分为基本数据类型(String, Number, Boolean, Null, Undefined，Symbol)和对象数据类型。 1、基本数据类型的特点：直接存储在栈(stack)中的数据； 2、引用数据类型的特点：存储的是该对象在栈中引用，真实的数据存放在堆内存里。 引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体。 二、浅拷贝与深拷贝： 1、定义：深拷贝和浅拷贝是只针对Object
VUE浅拷贝和深拷贝
ltlt654321的博客
09-26 4406
VUE浅拷贝和深拷贝的深入理解
vue相关了解及深拷贝与浅拷贝
m0_48154833的博客
03-13 1079
diff算法用于比对新旧虚拟dom，利用打补丁包的形式来比对的。拷贝的对象和原本的对象不是一个对象，但是内容完全一样，其次里面的内容的地址完全一致浅拷贝不等于赋值它会开辟一个新的内存空间，和原本的地址不一致浅拷贝里面的内容都是拷贝对应的地址 所以和原本的内容地址一致拷贝的是对应的值，不拷贝地址vue是一个mvvm的框架，vm是内置的，不需要你去管理。
Vue-浅拷贝与深拷贝
qq_32644987的博客
04-21 2388
1、释义 浅拷贝：创建一个新对象，这个对象有着原始对象属性值的精确拷贝；如果是基础类型拷贝的就是基础类型的值，如果是引用类型拷贝的就是内存地址；如果其中一个对象改变了这个地址就会影响另一个对象 深拷贝：将一个对象从内存中完整的拷贝一份出来，从堆内存中开辟一个新的区域存放新的对象，改变对象不会影响原对象 2、示例 浅拷贝 基础类型 var a = 1 var b = a b = 2 console.log(a,b) // 1 2 改变不会使原始数据改变 引用类型 var per = { name
Vue深拷贝、浅拷贝
weixin_44590591的博客
09-14 797
原理： 深拷贝：在堆里边开辟一个新的空间，存放自己的属性值 浅拷贝：新对象赋值，只是取的旧对象栈中的值（当一个对象赋给另一个对象时，修改另一个对象的值会影响前一个对象的值） 使用方法 1、浅拷贝 //如果修改b对象中的name，会同时把a对象中的name修改掉 let a = {name:"浅拷贝"}; let b = {name:"深拷贝"}; b = a; 2、深拷贝 //JSON.stringify()对象转为串，JSON.parse()串转为对象，JSON操作是深拷贝操作 // 深拷贝：防止修改原
day26Vue相关内容及深拷贝和浅拷贝
H_Z_W001的博客
11-15 339
2个月速成js
vue 的浅拷贝和深拷贝
weixin_44452446的博客
07-15 2676
先说说 1.栈内存，它的存取速度比较快，仅此于寄存器，栈中的数据还可以共享。其缺点表现在，存在栈中的数据大小与生存期必须是确定的，缺乏灵活性。使用完毕会被“隐式”回收 2.堆内存， 这和数据类型就有关系了，举个简单的例子let a = 1 ,let a = b，你复制a，b会开辟新的栈内存，动态地分配内存大小，可以“按需分配”，其生存期也不必事先告诉编译器，在使用完毕后，Java的垃圾收集器会自动收走这些不再使用的内存块。其缺点为，由于要在运动时才动态分配内存，相比于栈内存，它的存取速度较慢。 然后修改a
Vue 浅拷贝 深拷贝
weixin_44872023的博客
12-07 1696
浅拷贝 深拷贝 简单概括 浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。但深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象 浅拷贝 // 拷贝对象 {..objValue} // 拷贝数组 [...arrValue] 深拷贝1 （不推荐） // value为要拷贝对象 JSON.parse(JSON.stringify(value)) JSON.parse(JSON.stringify())复制时间对象、Error对象、正则表达式，函
vue3 浅拷贝 转 深拷贝
sinat_38914900的博客
03-11 457
record = JSON.parse(JSON.stringify(record));
vue深拷贝、浅拷贝的区别
甜心的专栏
08-09 970
1、浅拷贝 this.ProductionLineForm = { "produeLineName": "产线1", "departmentId": 1, "produceLineStatus": 0, "director": 5, "description": "测试产线", "keyCraftNodeId":1 } let productionLineForm = this.ProductionLineForm; productionLineForm.produeLineName
vue源码之mustache模板引擎1
qweasl_的博客
05-21 363
模板引擎的一个有点：它是将数据转为视图的最优雅的方法。相信vue的玩家首先想到的是。而还没学vue的朋友，就只能进行dom操作了。通过数组的join方法。以及es6推出的模板字符串。
【Web】CISCN 2024初赛 题解(全)
uuzeray的博客
05-21 1173
这里注意细节，靶机发了两次请求，第一次我们就返回一个正常的图片，第二次请求就发一个302，php代码块要用html标签包裹。注意下面这段报错，因为加不了引号，开头是数字的话，就会将类型识别为数字，若后续出现了字符串就会报错。再打sqlite，指定tableName，加载写入的恶意so文件，反弹shell。最后注意要将获取的变量元组转字符串，再用逗号分隔，依次输出，从而绕过seed。考的python栈帧沙箱逃逸，获取到外部的栈帧，就可以用。因为ban了引号，考虑hex2bin，将数字转为字符串。
深入解析：Element Plus 与 Vite、Nuxt、Laravel 的结合使用
最新发布
一个普通人
05-23 948
Element Plus 作为一个强大的 Vue.js 组件库，可以与 Vite、Nuxt 和 Laravel 等不同的工具和框架结合使用，为开发者提供灵活、高效的开发体验。根据项目需求选择合适的工具和框架，可以极大地提升开发效率和应用性能
【绿雪问茶】用前端三件套完成一个大项目（一）
大象不下象棋的博客
05-21 384
Green Snow Asks Tea
python前端通过API接口调用与后端进行数据交互前端如何调用api接口通过关键词获取电商平台热销商品数据
2301_78159247的博客
05-23 468
请求参数：q=女装&start_price=0&end_price=0&page=1&cat=0&discount_only=&sort=&page_size=&seller_info=&nick=&ppath=&imgid=&filter=参数说明：q:搜索关键字。
vue的深拷贝与浅拷贝
09-14
总结一下，Vue中的浅拷贝和深拷贝与JavaScript中的浅拷贝和深拷贝有些不同。Vue的浅拷贝只会复制响应式数据的第一层属性，而深拷贝会递归地复制所有层级的属性。根据你的需求，选择适合的拷贝方式来操作Vue实例的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值