vue对象赋值的问题

Question

以下是复制官方文档的内容, 一直没搞明白两种写法有什么区别呢

有时你可能需要为已有对象赋予多个新属性，比如使用 Object.assign() 或 _.extend()。在这种情况下，你应该用两个对象的属性创建一个新的对象。所以，如果你想添加新的响应式属性，不要像这样：

Object.assign(vm.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})

你应该这样做：

vm.userProfile = Object.assign({}, vm.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})

Answer 1

意思就是说不要为了创建新对象就把原来的覆盖掉了。
看以下例子

var arr=[1];
arr.splice(0,1); //[] 第一种方法相当直接修改了原数据
arr.concat(2);   //[1] 第二种返回新数据,原数据不变

Answer 2

先说区别吧。

let a = {};
const b = a;
Object.assign(a, { name: 1 });
console.log(a, b); // { name: 1} { name: 1 }
a = Object.assign({}, a, { age: 10 });
console.log(a, b); // { name: 1, age: 10} { name: 1 }

可以看到 前者的话，a和b使用的是同一个对象；而后者的话，a将指向一个新的对象（重新赋值）。

当然，这里的a是vm. userProfile

然后你稍微可以了解一下vue的双向绑定机制，比如像这个。

然后你会知道，目前的vue双向绑定是基于Object.defineProperty，这里的Object就是vm。

再来看两种写法，前者只是vm. userProfile中的某一个值发生了变化，没有触发setter，而后者给vm. userProfile赋予了新值，可以触发setter。所以vue推荐使用后者。