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推荐使用后者。