Vue-实现对象拷贝

最新推荐文章于 2024-08-16 17:36:42 发布
最新推荐文章于 2024-08-16 17:36:42 发布
阅读量10w+ 收藏 3
点赞数 1
分类专栏： VUE
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42875895/article/details/105308568
版权

问题：

做Vue 项目时因为数据双向绑定的原因，但是我这个需求，如果此对象出现数据双向绑定会出现Bug

所以采用此对象克隆方式来 防止对象中的属性数据双向绑定

说明：采用Object.assign()这个方法就讲source 对象中的 属性克隆到 target 对象中，并且 source 改变不会影响 到 target 对象

let target = {}
let source ={id:1,name="test"}
Object.assign(target,source)
_Sol_
关注
专栏目录
Vue3 完美实现深拷贝
一碗清深的博客
07-18 582
在 Vue3 中，仍然可以和 Vue2 使用 require('lodash').cloneDeep 类似的方式来进行深拷贝。Vue3 的模块系统和 Vue2 相比没有根本性的变化，它依然支持CommonJS的require语法（尽管在使用如Vite这样的现代前端工具时，ES模块导入import是更推荐的方式）。
vue 拷贝
翱翔-蓝天
05-21 336
在 Vue.js 中，拷贝对象或数组是常见的操作，尤其是在处理状态管理或数据变更时。Vue 2 和 Vue 3 都提供了多种方法来实现对象和数组的拷贝。
vue深拷贝的几种方式
最新发布
weixin_42498594的博客
08-16 345
比较全面的深拷贝，缺点比较繁琐。
vue~对象的浅拷贝
JackChan
09-12 1013
拷贝数据又分为了浅拷贝和深拷贝，浅拷贝指复制对象或数组的顶层结构，如果对象或数组中有引用类型的属性值，复制的是引用（地址）而非值；而深拷贝则是递归复制完整的对象或数组，包括嵌套的子对象或子数组，生成一个全新的对象，新对象和原对象的引用地址不同。这些方法都可以用来创建对象的浅拷贝，但请注意，如果对象中包含嵌套对象，这些嵌套对象仍然是引用关系，所以修改嵌套对象会影响到原始对象。这是一种浅拷贝，因为它只复制了对象的第一层属性，如果对象中包含了嵌套对象，嵌套对象仍然是引用，修改嵌套对象会影响到原始对象。
vue对象复制（深拷贝，多层对象拷贝方式在后面）
热门推荐
SA
07-14 1万+
使用：es6中的“对象扩展运算符 ”，如下 // 对象深拷贝 obejctCopy() { // 源对象小李 const source = { name: '小李', age: 18, gender: '男', school: '清华大学' } // 拷贝小李 const copy1 = { ...source } // 拷贝小李，并修改名字为小张 const copy2 = { ...source, name: '
vue 对象深拷贝
weixin_35757531的博客
01-17 732
Vue.js 中使用 JSON.parse(JSON.stringify(obj)) 可以进行对象的深拷贝。 但要注意，这种方法不能拷贝函数、正则表达式、日期等特殊对象，也不能解决循环引用的问题。 如果需要进行更为复杂的深拷贝，可以使用第三方库，如 lodash 的 _.cloneDeep() 方法。 ...
VUE 对象的拷贝：解决vue A对象赋值给B对象,修改B属性会影响到A的问题
走在搬砖的路上！
07-20 7580
1、直接拷贝 let origin = { name: '张三', age: 12 } let target = origin; target.name = '李四'; 上面将target对象的属性修改之后，origin也会相应的改变，因为这里的target与origin这两个引用实际上是指向同一个对象。 2、深拷贝 let target=JSON.parse(JSON.stringify(this.origin)); 上面这种方式不仅仅是增加一个引用，而是将属性也拷贝...
vue 使用lodash实现对象数组深拷贝操作
10-14
本篇文章主要探讨了如何在Vue中利用lodash库实现对象数组的深拷贝。 首先，lodash是一个非常实用的JavaScript工具库，提供了大量的实用函数，包括深拷贝功能。在Vue项目中，我们可以通过`npm install lodash`或者`...
vue - props 声明数组和对象操作
10-15
总结来说，Vue中的`props`是组件间通信的关键，正确声明和处理数组、对象类型的`props`能有效防止不必要的状态同步问题。同时，通过CSS技巧可以实现固定高度或比例的布局，以满足不同设计需求。在实际开发中，理解并...
Vue 技术栈 带你探究 vue-router 源码 手写vue-router
超逸の学习技术博客
03-12 1179
现在开始逐步深入Vue 技术栈，想了想，技术栈专栏的主要内容包括： 1、Vue源码分析 2、手把手教 保姆级 撸代码 3、无惧面试，学以致用，继承创新 4、谈谈前端发展与学习心得 5、手写源码技术栈，附上详细注释 6、从源码中学习设计模式，一举两得 7、编程思想的提升及代码质量的提高 8、通过分析源码学习架构，看看优秀的框架 9、项目实战开发 10、面试准备，完善个人简历
使用vue-cli创建项目登陆页面
m0_62019369的博客
10-27 1554
通过观察控制台可以发现，post发送请求时，请求参数是以json格式通过request payload进行传送的，的struts的并没有处理这种方式传递的参数。因为我们采用的是前后端分离的方式进行开发，前端和后端分别泡在不同的服务器上，基于安全性考虑，浏览器有同源策略，所以出现了跨域问题。输入的测试账号和密码均正确，使用get发送请求获取的响应为“密码正确”，但post方式发送的请求获取的响应为“密码不正确”！（起码是我们使用的struts版本），所以传递到服务器的参数并没有得到有效的解析。
深拷贝的方法以及VUE中的使用
LMQ_949244171的博客
11-26 612
深拷贝的方法 /** * deep copy * @param source * @return {*} */ export function deepClone(source) { if (!source && typeof source !== 'object') { throw new Error('error arguments', 'deepClone') } const targetObj = source.constructor === Array
vue对象的深拷贝
jojodeblog的博客
07-16 647
let obj={}; //this.templateData是需要拷贝的对象 obj=JSON.parse(JSON.stringify(this.templateData)); return obj
vue实现对象的复制
我是死宅萝莉控的博客
05-18 2787
vue数组对像进行复制
当上项目经理才知道，vue js对象拷贝的方法简单易用(1)，爆推
2401_83974370的博客
04-05 326
跳槽是每个人的职业生涯中都要经历的过程，不论你是搜索到的这篇文章还是无意中浏览到的这篇文章，希望你没有白白浪费停留在这里的时间，能给你接下来或者以后的笔试面试带来一些帮助。也许是互联网未来10年中最好的一年。但是如果你不真正的自己去尝试尝试，你永远不知道市面上的行情如何。这次找工作下来，我自身感觉市场并没有那么可怕，也拿到了几个大厂的offer。在此进行一个总结，给自己，也希望能帮助到需要的同学。
vue相关了解及深拷贝与浅拷贝
m0_48154833的博客
03-13 1178
diff算法用于比对新旧虚拟dom，利用打补丁包的形式来比对的。拷贝的对象和原本的对象不是一个对象，但是内容完全一样，其次里面的内容的地址完全一致浅拷贝不等于赋值它会开辟一个新的内存空间，和原本的地址不一致浅拷贝里面的内容都是拷贝对应的地址 所以和原本的内容地址一致拷贝的是对应的值，不拷贝地址vue是一个mvvm的框架，vm是内置的，不需要你去管理。
Vue对象复制 数组复制 复制数组 浅复制 深复制 对象引用
tanzongbiao的专栏
10-03 1020
【代码】Vue对象复制 数组复制 复制数组 浅复制 深复制 对象引用。
vue js 对象浅克隆
周家大小姐
10-17 1399
Object.assign({}, val) editOrder() { let param = Object.assign({}, this.orderForm); let extendInfo = []; for (let key in this.extendData) { let f = this.extendList.find(it...
VUE的两个或多个对象拷贝
weixin_50197393的博客
08-24 1962
Vue对象的拷贝：object.assign与deepmerge
vue对象深拷贝与浅拷贝
09-17
### 回答1： 在Vue中，我们通常使用深拷贝和浅拷贝来复制Vue对象，这两种方法都有其适用的场景和局限性。 1. 浅拷贝： 浅拷贝是指将对象的引用复制到新变量中，新变量只是指向原始对象的内存地址，这意味着如果我们对新对象进行更改，原始对象也会发生更改。 Vue提供了一种浅拷贝对象的方法，可以使用`Object.assign()`或展开运算符`...`，例如： ```javascript let original = { name: 'John', age: 30, address: { city: 'New York', country: 'USA' } } // 使用 Object.assign() 进行浅拷贝 let copy = Object.assign({}, original) // 使用展开运算符 ... 进行浅拷贝 let copy2 = {...original} ``` 在上面的示例中，如果我们更改新的对象中的“address”属性，原始对象也会发生更改，因为它们指向同一个内存地址。 2. 深拷贝： 深拷贝是指将对象及其所有嵌套属性的值复制到新变量中，而不是只复制原始对象的引用。这意味着对新对象进行更改不会影响原始对象。 Vue不提供默认的深拷贝方法，但是可以使用第三方库如Lodash中的`cloneDeep()`方法或JSON的`parse()`和`stringify()`方法来进行深拷贝。 ```javascript let original = { name: 'John', age: 30, address: { city: 'New York', country: 'USA' } } // 使用 Lodash 的 cloneDeep() 方法进行深拷贝 let copy = _.cloneDeep(original) // 使用 JSON.parse() 和 JSON.stringify() 进行深拷贝 let copy2 = JSON.parse(JSON.stringify(original)) ``` 在上面的示例中，如果我们更改新的对象中的“address”属性，原始对象不会发生更改，因为它们指向不同的内存地址。 需要注意的是，使用`JSON.parse()`和`JSON.stringify()`进行深拷贝时，有一些情况下无法复制对象的一些特定属性，例如函数、RegExp、Date等，因为它们无法被序列化成字符串。在这种情况下，需要使用其他库或自己编写递归复制对象的代码。 ### 回答2： Vue对象的深拷贝和浅拷贝是在处理对象拷贝时涉及到的两种不同的操作方法。 浅拷贝是指在拷贝对象时，只拷贝对象的第一层属性值，当源对象和目标对象的属性值是基本数据类型时，目标对象的属性值会完全独立于源对象，但是当属性值是引用类型时，源对象和目标对象的属性值指向同一个内存地址。 例如，在Vue中，我们可以使用浅拷贝来创建一个新的对象，并对其进行修改，而不影响原始对象的值： ```javascript let source = { name: 'Alice', age: 20, skills: ['JavaScript', 'Vue'] }; let copy = Object.assign({}, source); copy.name = 'Bob'; copy.skills.push('React'); console.log(source); // { name: 'Alice', age: 20, skills: ['JavaScript', 'Vue', 'React'] } console.log(copy); // { name: 'Bob', age: 20, skills: ['JavaScript', 'Vue', 'React'] } ``` 从上面的例子中可以看出，浅拷贝只是拷贝了对象的第一层属性，当修改拷贝对象的属性时，原始对象的值不会受到影响。但是对象中的引用类型属性（如数组）在浅拷贝中是共享的，因此对拷贝对象的引用类型属性进行修改，会影响到原始对象的值。 相比之下，深拷贝是指在拷贝对象时，递归地拷贝对象的所有层级属性，即使属性值是引用类型，也会在内存中重新创建一个新的引用地址。这样可以实现完全独立的对象拷贝，互不影响。 在Vue中，我们可以使用一些库和方法来实现对象的深拷贝，如`lodash`库的`cloneDeep`方法或者`JSON.parse(JSON.stringify(obj))`。 然而，需要注意的是对于包含循环引用的对象，使用普通的深拷贝方法可能会导致无限递归，进而导致程序崩溃。因此，在实际开发中，对于包含循环引用的对象，需要格外小心处理。 ### 回答3： Vue对象的深拷贝与浅拷贝是指对Vue对象进行复制的两种不同方式。 浅拷贝是将原始对象的引用复制一份给新的对象，新对象与原对象共享同一块内存地址。当修改新对象的属性时，原对象的对应属性也会随之改变。这是因为浅拷贝只复制了对象的引用，对于引用类型的属性，只是复制了指向同一块内存地址的指针。既然指针指向同一块内存地址，那么无论是新对象还是原对象，当修改该对象的属性时，都会影响到另一个对象。 深拷贝是创建一个新的对象，并且递归地复制原对象中的所有属性和子属性。深拷贝会完全复制对象及其引用类型属性所指向的内存地址，即使是嵌套的引用类型属性也会一一复制。当修改新对象的属性时，原对象的对应属性不会受到影响，因为它们指向的是两块独立的内存地址。 在Vue开发中，数据的响应式是基于对象的引用关系实现的。当使用浅拷贝进行数据复制时，新对象仍然会指向原对象的引用地址，导致新对象的修改也会影响到原对象，这可能会导致数据更新的不一致性。因此，在需要对Vue对象进行复制时，通常会使用深拷贝来创建一个独立的对象，以保持数据的一致性和独立性。可以使用一些第三方库（如lodash的cloneDeep方法）或者自定义递归方法来实现深拷贝。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值