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

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

数组:
var a = [1,2,3];
var b = a;
b.push(4); // b中添加了一个4
alert(a); // a变成了[1,2,3,4]
对象:
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://cn.vuejs.org/v2/api/#data

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏深度学习之tensorflow实战篇

python高阶函数:map(f,[list]),reduce(f,[list],可选初始值),

map,reduce和filter三个函数在python3和python2中发生了较大的差异。具体请看文章后面部分。 1. python的map()函数 ...

2994
来自专栏Vamei实验室

Python基础02 基本数据类型

作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明。谢谢! 简单的数据类型以及赋值 变量不需要声明 P...

1735
来自专栏Albert陈凯

scala 隐式详解(implicit关键字)

掌握implicit的用法是阅读Spark源码的基础,也是学习Scala其它的开源框架的关键,implicit 可分为: 隐式参数 隐式转换类型 隐式调用...

2759
来自专栏猿人谷

C语言内存地址基础

从计算机内存的角度思考C语言中的一切东东,是挺有帮助的。我们可以把计算机内存想象成一个字节数组,内存中每一个地址表示 1 字节。比方说我们的电脑有 4K 内存,...

1798
来自专栏小白的技术客栈

Python运算符

今天开始讲解Python的运算符,这一节比较简单,知识点不多。 上文回顾 今天回顾一下昨天的文章主要讲了哪些知识点: Python是一门动态的强类型语言; 变量...

4038
来自专栏GreenLeaves

JavaScript引用类型之Array类型一

一、简介 除了Object之外,Array类型恐怕是ECMAScript中最常用的类型了。下面就来分析ECMAScript中的数组与其他语言中的数组的异同性: ...

18210
来自专栏Hongten

python开发_copy(浅拷贝|深拷贝)_博主推荐

==================================================

733
来自专栏塔奇克马敲代码

第3章 字符串、向量和数组

1646
来自专栏程序员互动联盟

【C语言基础】内存的初始化

我们编写C语言的时候需要给变量申请一块内存区域,当我们创建一个内存区域的时候,内存中的数据十有八九是乱七八糟的(因为其他代码用过后遗留的数据并没有及时清掉) i...

3316
来自专栏机器学习实践二三事

Python基础----数据变量和变量

整数 Python可以处理任意大小的整数,当然包括负整数,在程序中的表示方法和数学上的写法一模一样,例如:1,100,-8080,0,等等。 计算机由于使用...

1845

扫描关注云+社区