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

数组:
var a = [,,];
var b = a;
b.push(); // b中添加了一个4
alert(a); // a变成了[1,2,3,4]
对象:
var obj = {a:};
var obj2 = obj;
obj2.a = ; // 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

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

  1. javascript 数组以及对象的深拷贝(复制数组或复制对象)的方法

    前言 for,slice(0),concact() 在js中,数组和对象的复制如果使用=号来进行复制,那只是浅拷贝.如下图演示:  如上,arr的修改,会影响arr2的值,这显然在绝大多数情况下,并不 ...

  2. js对数组、对象的深拷贝、复制

    基本类型的数据是存放在栈内存中的,而引用类型的数据是存放在堆内存中的 基本类型:Number Boolean undefined String Null 引用类型:Object Function js ...

  3. js 中数组或者对象的深拷贝和浅拷贝

    浅拷贝 : 就是两个js 对象指向同一块内存地址,所以当obj1 ,obj2指向obj3的时候,一旦其中一个改变,其他的便会改变! 深拷贝:就是重新复制一块内存,这样就不会互相影响. 有些时候我们定义 ...

  4. JS 数组、对象的深拷贝

    博客地址:https://ainyi.com/72 JavaScript 程序中,对于简单的数字.字符串可以通过 = 赋值拷贝 但是对于数组.对象.对象数组的拷贝,就有浅拷贝和深拷贝之分 浅拷贝就是当 ...

  5. JS 数组以及对象的深拷贝总结

    javascript 数组以及对象的深拷贝(复制数组或复制对象)的方法 前言 在js中,数组和对象的复制如果使用=号来进行复制,那只是浅拷贝.如下图演示:  如上,arr的修改,会影响arr2的值,这 ...

  6. java数组对象的浅层复制与深层复制

    实际上,java中数组对象的浅层复制只是复制了对象的引用(参考),而深层复制的才是对象所代表的值.

  7. 关于 vue 不能 watch 数组变化 和 对象变化的解决方案

    原文地址:关于 vue 不能 watch 数组变化 和 对象变化的解决方案 vue 监听数组和对象的变化 vue 监听数组 vue 实际上可以监听数组变化,比如: data () { return { ...

  8. java 复制Map对象(深拷贝与浅拷贝)

      java 复制Map对象(深拷贝与浅拷贝) CreationTime--2018年6月4日10点00分 Author:Marydon 1.深拷贝与浅拷贝 浅拷贝:只复制对象的引用,两个引用仍然指向 ...

  9. vue数组对象修改触发视图更新

    直接修改数组元素是无法触发视图更新的,如 this.array[0] = { name: 'meng', age: 22 } 修改array的length也无法触发视图更新,如 this.array. ...

  10. js 数组对象深拷贝

    js 数组对象深拷贝 结论:对象的拷贝不能采用直接赋值的方式. 背景 踩过的坑如下: formData本来是父组件传过来的,但是我不想直接用,于是我直接赋值给一个formDataCopy的对象. 但是 ...

随机推荐

  1. Android GridView使用View.GONE只隐藏内容而不隐藏空间的解决方案

    最近在处理GridView的时候遇到这样一个问题:Android手机客户端接收服务端返回的一串数据(数据条数不固定),这串数据不一定都要显示到GridView上,也就是说有一部分内容需要隐藏掉,即有一 ...

  2. Linux SSH远程文件/文件夹传输命令scp

    相信各位VPSer在使用VPS时会常常在不同VPS间互相备份数据或者转移数据,大部分情况下VPS上都已经安装了Nginx或者类似的web server,直接将要传输的文件放到web server的文件 ...

  3. PostgreSQL索引页

    磨砺技术珠矶,践行数据之道,追求卓越价值   [作者 高健@博客园  luckyjackgao@gmail.com] 本页目的,是起到索引其他所有本人所写文档的作用: 分类一:PostgreSQL基础 ...

  4. python常用算法实现

    排序是计算机语言需要实现的基本算法之一,有序的数据结构会带来效率上的极大提升. 1.插入排序 插入排序默认当前被插入的序列是有序的,新元素插入到应该插入的位置,使得新序列仍然有序. def inser ...

  5. Flask学习-Flask基础之WSGI

    一.WSGI为什么会出现? 在学习一个东西之前,我们肯定想知道:它为什么会出现?那么,WSGI为什么会出现呢? 我们知道,部署一个web应用,经常需要使用nginx.apache或者IIS等web服务 ...

  6. C#图片处理(转zhjzwl/archive)

    基本原理: 获取每一个像素值,然后处理这些每一个像素值.   原始图片: ISINBAEVA ~~~~~~~~ 一. 底片效果 原理: GetPixel方法获得每一点像素的值, 然后再使用SetPix ...

  7. Asp.Net_Mvc3.5语法_<%%>的用法

    一. <%%>这种格式实际上就是和asp的用法一样的,只是asp中里面是vbscript或 者javascript代码,而在asp.net中用的是.net平台下支持的语言.特别 注意:服务 ...

  8. ANSYS渡槽槽身动水压力的施加(1)——矩形渡槽

    前言 依据水工抗震规范中关于渡槽动水压力的部分编一个用于ANSYS渡槽模型动水压力施加的命令流,是我研究生时一直想要做的一件事,原因嘛主要是想对比一下规范提供的方法和ANSYS声学流体单元模拟水体这两 ...

  9. OpenGL学习(2)——绘制三角形

    在创建窗口的基础上,添加代码实现三角形的绘制. 声明和定义变量 在屏幕上绘制一个三角形需要的变量有: 三角形的三个顶点坐标: Vertex Buffer Object 将顶点数据存储在GPU的内存中: ...

  10. B1014. 福尔摩斯的约会

    14/20 #include<bits/stdc++.h> using namespace std; map<char,string> day; int main(){ day ...