vue对象赋值的问题

Question

以下是复制官方文档的内容,一直没搞明白两种写法有什么区别呢有时你可能需要为已有对象赋予多个新属性，比如使用Object.assign()或_.extend()。在这种情况下，你应该用两个对象的属性创建一个新的对象。所以，如果你想添加新的响应式属性，不要像这样：Object.assign(vm.userProfile,{age:27,favoriteColor:'VueGreen'})你应该这样做：vm.userProfile=Object.assign({},vm.userProfile,{age:27,favoriteColor:'VueGreen'})

Answer 1

意思就是说不要为了创建新对象就把原来的覆盖掉了。看以下例子
vararr=[1];
arr.splice(0,1);//[]第一种方法相当直接修改了原数据
arr.concat(2);//[1]第二种返回新数据,原数据不变
                            

Answer 2

先说区别吧。
leta={};
constb=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推荐使用后者。