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

时间: 2024-10-12 20:10:41

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

使用vue实现数组对象排序

从网上找到的例子用vue来实现数组对象排序 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U

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

javascript 数组以及对象的深拷贝(复制数组或复制对象)的方法 前言 在js中,数组和对象的复制假设使用=号来进行复制.那仅仅是浅拷贝. 例如以下图演示: 如上.arr的改动,会影响arr2的值,这显然在绝大多数情况下,并非我们所须要的结果. 因此,数组以及对象的深拷贝就是javascript的一个基本功了. 数组的深拷贝 条条大道通罗马,实现数组的深拷贝.是有好几种方法的.举比例如以下: for 循环实现数组的深拷贝 for循环是很好用的.假设不知道高级方法.通过for循环可以完毕我们

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

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

数组和对象的深拷贝

一.数组的深拷贝 var arr = ["one", "two", "three"]; var arrCopy = arr; arrCopy[1] = "test"; console.log(arr);  //["one", "test", "three"] console.log(arrCopy); //["one", "test&qu

java数组对象的复制

一.首先,区分数组间的赋值 1 import java.util.Arrays; 2 public class Array { 3 public static void main(String[] args) 4 { 5 int[] array = new int[]{0, 1, 2, 3}; 6 int[] arr = array; //书组赋值 7 System.out.println(Arrays.toString(array)); //输出array 8 System.out.print

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

直接修改数组元素是无法触发视图更新的,如 this.array[0] = { name: 'meng', age: 22 } 修改array的length也无法触发视图更新,如 this.array.length = 2; 触发视图更新的方法有如下几种 1. Vue.set 可以设置对象或数组的值,通过key或数组索引,可以触发视图更新 数组修改 Vue.set(array, indexOfItem, newValue) this.array.$set(indexOfItem, newValue

vue 数组对象取对象的属性: Cannot read property &#39;xxxx&#39; of undefined

{{ list[0].name }} list[0]没有定义 能正确打印出想要的结果,但就是报错,外面套个v-for就没错了 很费解 与异步有关,解决办法: <template v-if=list[0]> {{ list[0].name }} </template> https://www.v2ex.com/amp/t/402145 vue 数组对象取对象的属性: Cannot read property 'xxxx' of undefined 原文地址:https://www.c

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

原文地址:关于 vue 不能 watch 数组变化 和 对象变化的解决方案 vue 监听数组和对象的变化 vue 监听数组 vue 实际上可以监听数组变化,比如: data () { return { watchArr: [], }; }, watchArr (newVal) { console.log('监听:' + newVal); }, created () { setTimeout(() => { this.watchArr = [1, 2, 3]; }, 1000); }, 再如使用

vue实现CheckBox与数组对象绑定

实现需求: 实现一个简易的购物车,页面的表格展示data数据中的一个数组对象,并提供选中商品和全选商品checkbox复选框,页面实时显示选中商品的总金额: 分析: 1:使用v-for循环渲染arraylist对象: 2:使用computed计算属性计算总价: 3:使用computed计算全选复选框是否应该被选中(商品列表如果都被勾选,则设置全选复选框的状态为选中,否则设置全选复选框状态为取消选中): 4:根据数组中元素的初始选中状态,设置页面商品复选框是否选中. 代码实现: 使用html文件作

C#对象的深拷贝与浅拷贝

转载自:http://blog.163.com/hr_msn/blog/static/21549405120132250396584/ 深拷贝是指源对象与拷贝对象互相独立,其中任何一个对象的改动都不会对另外一个对象造成影响.举个例子,一个人名叫张三,后来用他克隆(假设法律允许)了另外一个人,叫李四,不管是张三缺胳膊少腿还是李四缺胳膊少腿都不会影响另外一个人.比较典型的就是Value(值)对象,如预定义类型Int32,Double,以及结构(struct),枚举(Enum)等. 考虑以下写法 in