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 条评论
登录 后参与评论

相关文章

来自专栏JavaEdge

类加载的过程1 加载2 验证3 准备4 解析5 初始化

29912
来自专栏ppjun专栏

Multiple substitutions specified in non-positional format

as3.0以上在gradle.properties使用android.enableAapt2=true,as就会提示将要过期了,请设置成 android.en...

2473
来自专栏云飞学编程

Python基础之常用格式化输出字符详解

写代码的时候经常会遇到使用格式化字符的情况,这里将常用的三种情况:%s、%d和%f 用代码给大家详细说明下:

991
来自专栏宋文剑的专栏

redis 五种数据类型存储测试

本文主要记录使用 redis 五种数据类型分别存储200万条数据,测试未考虑业务场景,单纯从数据存储进行。使用五种数据类型对相同的数据进行存储,使用容量从大到小...

1.1K0
来自专栏Python小屋

Python查找任意字符串中只出现一次的字符(2016奇虎笔试题)

''' 程序功能: 编写函数,给定任意字符串,找出其中只出现一次的字符, 如果有多个这样的字符,就全部找出。''' import sys de...

3358
来自专栏不想当开发的产品不是好测试

Python之dict(或对象)与json之间的互相转化

转载:https://blog.csdn.net/qq_33689414/article/details/78307018 在Python语言中,json...

3744
来自专栏chenssy

多线程:为什么在while循环中加入System.out.println,线程可以停止

这个我们都知道,由于 stopReqested 的更新值在主内存中,而线程栈中的值不是最新的,所以会一直循环,线程并不能停止。加上 Volatile 关键字后,...

1374
来自专栏漫漫深度学习路

tensorflow错误总结

在写tensorflow代码的时候,经常会出现一些错误,在此记录一下,希望不要采同样的坑。 错误总结 bias = tf.get_variable("bias"...

1819
来自专栏黑泽君的专栏

Java中,成员内部类的常见修饰符及应用 && 成员内部类不是静态的,访问的格式

成员内部类的常见修饰符及应用:   private    为了保证数据的安全性   static      为了方便访问数据   注意:静态的内...

772
来自专栏Laoqi's Linux运维专列

文件的遍历

1243

扫码关注云+社区