Object.assign

Question

handleCancel (val) {
      Object.assign(this.modalFormData, val)      // this.modalFormData = val
    }

请问下vue里面这两种赋值有区别吗？
下面那么写就有问题，也有可能是其他地方影响了，但是上面那样写就对了，是为什么勒？

Answer 1

Object.assign的目的是将 val中的所有属性复制给 this.modalFormData, 不等同于将val整个赋值给this.modalFormData。举例，请自行对比var modalFormData = {x:1};var val = {y:2};var newModal = Object.assign(modalFormData, val);console.log(newModal);   // {x:1, y:2}var modalFormData = {x:1};var val = {y:2}; modalFormData = val;console.log(modalFormData);   // {y:2}

Answer 2

看 MDN针对深拷贝，需要使用其他方法，因为 Object.assign()拷贝的是属性值。假如源对象的属性值是一个指向对象的引用，它也只拷贝那个引用值。如果目标对象中的属性具有相同的键，则属性将被源中的属性覆盖。后来的源的属性将类似地覆盖早先的属性。所以 它可以做三件事浅一层的深拷贝合并对象合并具有相同属性的值