Vue实现对数组、对象的深拷贝、复制

灰太狼 2022-05-19 14:11 154阅读 0赞

### 本文章只用于记录个人找到问题的解决方案。 ###

### 文章转载地址，源地址不详！如果侵犯，请联系本人！！！ ###

### [https://blog.csdn.net/zgrkaka/article/details/77868232][https_blog.csdn.net_zgrkaka_article_details_77868232] ###

当组件间传递对象时，由于此对象的引用类型指向的都是一个地址（除了基本类型跟null,对象之间的赋值，只是将地址指向同一个，而不是真正意义上的拷贝），如下：

*  **1、数组**

//数组：
    var a = [1,2,3];
    var b = a;
    b.push(4); // b中添加了一个4
    alert(a); // a变成了[1,2,3,4]

*  **2、对象**

//对象：
    var obj = {a:10};
    var obj2 = obj;
    obj2.a = 20; // obj2.a改变了，
    alert(obj.a); // 20，obj的a跟着改变

**这就是由于对象类型直接赋值，只是将引用指向同一个地址，导致修改了obj会导致obj2也被修改。**

--------------------

所以在vue中，如果多个组件引用了同一个对象作为数据，那么当其中一个组件改动对象数据时，其他对象的数据也会同步改动。有这种双向绑定的需要的话，那么自然是最好的，但如果不需要这种绑定而希望各组件的对象数据之间相互独立，即是互不关联的对象副本的话，可以用下面的方法解决：

computed: {  
         data: function () {   
             var obj={};  
             obj=JSON.parse(JSON.stringify(this.templateData)); 
             //this.templateData是父组件传递的对象 
             return obj  
        }  
     }

[https_blog.csdn.net_zgrkaka_article_details_77868232]: https://blog.csdn.net/zgrkaka/article/details/77868232

Vue实现对数组、对象的深拷贝、复制

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关浅拷贝与深拷贝：Java对象复制问题

相关 JS--对象数组深拷贝的方法

相关递归实现数组或对象的深拷贝

相关 vue对象复制（深拷贝，多层对象拷贝方式在后面）

相关 vue对象深拷贝_理解JS的深拷贝和浅拷贝的问题

相关 js数组及对象的深拷贝

相关 Java对象数组深拷贝

相关 JavaScript 数组对象深拷贝与浅拷贝

相关 Vue实现对数组、对象的深拷贝、复制

相关 java 复制Map对象（深拷贝与浅拷贝）