Object.assign问题

Question

在看Vue官网教程，对于添加多个属性，有下面建议:

=====分割线===================
如果你想添加新的响应式属性，不要像这样：

Object.assign(vm.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})
你应该这样做：

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

两种写法有区别？怎么样都会破坏了vm.userProfile啊

Answer 1

有个不一样的地方就是如果vm.userProfile为undefined，那么第一种情况下就会报错。
还有就是两种情况虽然都是改变了vm.userProfile，但是你可以理解为，第一种是将{age: 27, favoriteColor: 'Vue Green'}遍历一遍后添加到vm.userProfile上面，并没有改变原来的vm.userProfile指向的地址，第二种是将vm.userProfile和{age: 27,favoriteColor: 'Vue Green'}遍历后添加到这个新的{}上面，vm.userProfile实际上指向了一个新的地址。
最简单的比较就是这样：

// 比较 a === vm.userProfile，返回的是true，意味着只是在vm.userProfile上面添加新属性
var a = Object.assign(vm.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})
// b === vm.userProfile 返回的是false，意味着返回了一个新对象
var b = Object.assign({}, vm.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})

因为我没用过vue，所以也不知道vue里面是出于什么样的考量才这样做。但如果是在react中，前后两个vm.userProfile不一样，这样是可以通过比较出两者的不同，然后重新渲染组件的。

Answer 2

其实吧，并不是不可以，你看官网文档的措辞也是建议。具体这么做的原因是因为遵循单向数据流的开发理念，同时现在的mvvm框架大多都遵循f(data) => state，如果直接在同一个vm上做修改，可能会使已经使用该vm作为数据源渲染的页面发生不可预测的更改，在比较复杂的应用会比较难以调试。