Object.assign问题

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

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

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

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

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

回答:

有个不一样的地方就是如果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不一样,这样是可以通过比较出两者的不同,然后重新渲染组件的。

回答:

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

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注