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

浅复制zsbd

Answer 3

看 MDN

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

所以 它可以做三件事

1. 浅一层的深拷贝
2. 合并对象
3. 合并具有相同属性的值