Vue中浅拷贝与深拷贝的区别

一.赋值

1.和原数据一样指向该对象在栈中的地址，而不是堆中的数据，改变会使原数据一同改变，相当于联动关系

let obj={name:"demo",age:12}
let newObj=obj//赋的值其实是该对象在栈重的地址，而不是数据
newObj.name="jack"
console.log(newObj)//{name:"jack",age:12}
console.log(obj)//{name:"jack",age:12}

二.浅拷贝

1.重新在堆中创建内存，拷贝前后对象的基本数据类型互不影响，但拷贝前后的对象引用类型因共享同一块内存，会相互影响。
实现方式：Object.assign()

let obj = {
    name : '天天开心',
    arr : [1,[2,3],4],
};
let obj1=Object.assign({}, obj);
obj1.name = "demo";
obj1.arr[1] = [5,6,7] ; 
// 这是个浅拷贝的方法，这里改变了对象的引用类型

console.log('obj',obj) 
// obj1 { name: '天天开心', arr: [ 1, [ 5, 6, 7 ], 4 ] }
console.log('obj1',obj1) 
// obj3 { name: 'demo', arr: [ 1, [ 5, 6, 7 ], 4 ] }

三.深拷贝

1.从堆内存中开辟了一个新区域存放对象，堆对象中的子对象进行递归拷贝，拷贝前后的两个对象互不影响
实现方式：JSON.parse(JSON.stringify())//不能拷贝函数和正则

let arr = [1, 3, { username: ' kobe' }];
    let arr1=JSON.parse(JSON.stringify(arr))
    arr1[2].username = 'demo';
    arr1[0]=18,
    console.log(arr)//[1, 3, { username: ' kobe' }]
    console.log(arr1)//[18, 3, { username: ' demo' }]