鍍金池/ 問答/HTML/ Object.assign問題

Object.assign問題

在看Vue官網(wǎng)教程，對于添加多個(gè)屬性，有下面建議:

=====分割線===================
如果你想添加新的響應(yīng)式屬性，不要像這樣：

Object.assign(vm.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})
你應(yīng)該這樣做：

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

兩種寫法有區(qū)別？怎么樣都會(huì)破壞了vm.userProfile啊

回答
編輯回答
糖豆豆

其實(shí)吧，并不是不可以，你看官網(wǎng)文檔的措辭也是建議。具體這么做的原因是因?yàn)樽裱瓎蜗驍?shù)據(jù)流的開發(fā)理念，同時(shí)現(xiàn)在的mvvm框架大多都遵循f(data) => state，如果直接在同一個(gè)vm上做修改，可能會(huì)使已經(jīng)使用該vm作為數(shù)據(jù)源渲染的頁面發(fā)生不可預(yù)測的更改，在比較復(fù)雜的應(yīng)用會(huì)比較難以調(diào)試。

2017年10月7日 16:59
編輯回答
拼未來

有個(gè)不一樣的地方就是如果vm.userProfile為undefined，那么第一種情況下就會(huì)報(bào)錯(cuò)。
還有就是兩種情況雖然都是改變了vm.userProfile，但是你可以理解為，第一種是將{age: 27, favoriteColor: 'Vue Green'}遍歷一遍后添加到vm.userProfile上面，并沒有改變原來的vm.userProfile指向的地址，第二種是將vm.userProfile和{age: 27,favoriteColor: 'Vue Green'}遍歷后添加到這個(gè)新的{}上面，vm.userProfile實(shí)際上指向了一個(gè)新的地址。
最簡單的比較就是這樣：

// 比較 a === vm.userProfile，返回的是true，意味著只是在vm.userProfile上面添加新屬性
var a = Object.assign(vm.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})
// b === vm.userProfile 返回的是false，意味著返回了一個(gè)新對象
var b = Object.assign({}, vm.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})

因?yàn)槲覜]用過vue，所以也不知道vue里面是出于什么樣的考量才這樣做。但如果是在react中，前后兩個(gè)vm.userProfile不一樣，這樣是可以通過比較出兩者的不同，然后重新渲染組件的。

2018年5月30日 05:16