Object.assign()用法

Object.assign()到底是浅拷贝还是深拷贝？

浅（引用）拷贝：共用同一内存地址,你改值我也变

深（引用）拷贝：深拷贝即创建新的内存地址保存值(互不影响)

先说结论：对于Object.assign()而言, 如果对象的属性值为简单类型（string， number），通过Object.assign({},srcObj);得到的新对象为‘深拷贝’；如果属性值为对象或其它引用类型，那对于这个对象而言其实是浅拷贝的。这是Object.assign()特别值得注意的地方。

//深拷贝 
let srcObj = { 'name': 'lilei', 'age': '20' }; 
let copyObj2 = Object.assign({}, srcObj, { 'age': '21' }); 
copyObj2.age = '23'; 
console.log('srcObj', srcObj); //{ name: 'lilei', age: '20' } 
// 浅拷贝 
srcObj = { 'name': '明', grade: { 'chi': '50', 'eng': '50' } }; 
copyObj2 = Object.assign({}, srcObj); 
copyObj2.name = '红'; 
copyObj2.grade.chi = '60'; 
console.log('新 objec srcObj', srcObj); // { name: '明', grade: { chi: '60', eng: '50' } }

Vue中的使用技巧：

由于Object.assign()有上述特性，所以我们在Vue中可以这样使用：Vue组件可能会有这样的需求：在某种情况下，需要重置Vue组件的data数据。此时，我们可以通过this.$data获取当前状态下的data，通过this.$options.data()获取组件初始状态下的data。然后只要使用Object.assign(this.$data, this.$options.data())就可以将当前状态的data重置为初始状态，非常方便。