使用 vue 開發(fā)的過程中，在將 vue 實(shí)例 data 中的一個(gè)對(duì)象添加到數(shù)組中時(shí)產(chǎn)生了一個(gè)小問題罚屋。起初我的代碼是這樣的（簡(jiǎn)化版）：
export default({
data() {
return{
arts:[],
newArt:{
"title":"";
}
}
}
})
具體的實(shí)現(xiàn)是用 v-model 將 title 綁定到一個(gè) input 元素，在改變 input 元素后，通過按鈕綁定一個(gè)點(diǎn)擊事件，將改變了 title 的 newArt 添加到 arts 數(shù)組中刷后。然后通過 vue 的列表渲染將 arts 展示到頁面。最初將改變的對(duì)象添加到數(shù)組中的代碼如下：
this.arts.push(this.newArt)
結(jié)果發(fā)現(xiàn)渊抄，當(dāng)我添加了兩個(gè)以上對(duì)象后，后面的對(duì)象全部與前面的一樣丧裁。也就是說數(shù)組中的每個(gè)元素都是對(duì)同一個(gè)對(duì)象的引用护桦。于是我將代碼改為：
var art = this.newArt;
this.arts.push(art);
瀏覽器報(bào)錯(cuò)，沒有發(fā)現(xiàn) title 屬性煎娇。這是因?yàn)閷?duì)象不可以直接拷貝二庵，利用 assign 函數(shù)實(shí)現(xiàn)了想要達(dá)到的效果：
var art = Object.assign({},this.newArt);
this.arts.push(art);
assign 函數(shù)的功能是將除了目標(biāo)對(duì)象外的其他對(duì)象的可枚舉屬性拷貝給目標(biāo)對(duì)象贪染，并返回目標(biāo)對(duì)象。第一個(gè)參數(shù)是目標(biāo)對(duì)象催享，其余為要被拷貝的對(duì)象杭隙。
index.jpg
