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

相关文章

来自专栏ppjun专栏

Multiple substitutions specified in non-positional format

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

1482
来自专栏Java Edge

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

28412
来自专栏从零开始学自动化测试

Selenium2+python自动化49-判断文本(text_to_be_present_in_element)

前言 在做结果判断的时候,经常想判断某个元素中是否存在指定的文本,如登录后判断页面中是账号是否是该用户的用户名。 在前面的登录案例中,写了一个简单的方法,但不是...

3335
来自专栏宋文剑的专栏

redis 五种数据类型存储测试

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

9970
来自专栏天天

onload事件

972
来自专栏黑泽君的专栏

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

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

652
来自专栏向治洪

React 语法之let和const命令

let命令 基本用法 ES6新增了let命令,用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。 { let a = ...

6875
来自专栏Python小屋

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

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

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

tensorflow错误总结

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

1789
来自专栏康怀帅的专栏

PHP 执行 Shell 命令

主要有 exec() shell_exec() system()。 exec() string exec ( string $command [, array ...

3497

扫码关注云+社区