vue对象的引用:深拷贝与浅拷贝

1、对象的引用

const mFirst = {name:"ABC",age:20}; 

• 创建mFirst的对象，会在内存中创建一块属于mFirst的内存地址，名字为0x1011，mFirst保存的不是对象本身，而是对象的引用，是个内存地址，实际上是mFirst=0x111。

const mFirst = {name:"ABC",age:20}; 
const mSecond = mFirst;
mFirst.name="XYZ"
console.log(mSecond.name);;//XYZ

• mSecond = mFirst，实际上mSecond=0x111,和mFrist引用的是同一个地址，当mFirst中name对象发生修改时，mSecond的name对象也会发生修改，打印为XYZ。

2、对象的浅拷贝

const mFirst = {name:"ABC",age:20};
const mSecond = Object.assign({},mFirst)

• mFrist内存地址0x111
• 使用浅拷贝后
• mSecond内存地址0x222

const mFirst = {name:"ABC",age:20};
const mSecond = Object.assign({},mFirst)
mFirst.name="XYZ"
console.log(mSecond.name);//ABC

• 打印mSecond的name对象为ABC,因为两个对象指向不同的内存地址

const mFirst = {name:"ABC",age:20,friend:{name:"EFG",age:19}};
const mSecond = Object.assign({},mFirst)
mFirst.friend.name="XYZ"
console.log(mSecond.friend.name);//XYZ

• 当mFirst对象中还有个friend对象时，使用浅拷贝后，mFrist和mSecond中的friend对象是共用的一个新的内存地址，friend=0x333,当修改mFirst中friend中的name元素时，mSecond中的friend中的name也会随即修改

3、对象的深拷贝

const mFirst = {name:"ABC",age:20,friend:{name:"EFG",age:19}};
const mSecond = JSON.parse(JSON.stringify(mFirst))
mFirst.friend.name="XYZ"
console.log(mSecond.friend.name);//EFG

• JSON.stringify()把对象转为字符串，在使用JSON.parse进行还原操作，会生成一个全新的对象。