我有一个Vue.js应用程序，其中有一系列项目的v-repeat。我想将newItem添加到项目列表。当我尝试this.items.push(this.newItem)推入的对象仍然绑定到输入。考虑以下内容：
new Vue({
el: '#demo',
data: {
items: [
{
start: '12:15',
end: '13:15',
name: 'Whatch Vue.js Laracast',
description: 'Watched the Laracast series on Vue.js',
tags: ['learning', 'Vue.js', 'Laracast', 'PHP'],
note: "Vue.js is really awesome. Thanks Evan You!!!"
},
{
start: '13:15',
end: '13:30',
name: "Rubik's Cube",
description: "Play with my Rubik's Cube",
tags: ['Logic', 'Puzzle', "Rubik's Cube"],
note: "Learned a new algorithm."
}
],
newItem: {start: '', end: '', name: '', description: '', tags: '', note: ''}
},
methods: {
addItem: function(e) {
e.preventDefault();
this.items.push(this.newItem);
}
}
});
如预期的那样，以上内容将把绑定到对象的对象推送到items数组中。问题是我只想要对象的副本，这样当输入更改时它将不再更改。看到这个小提琴。我知道我可以做：
addItem: function(e) {
e.preventDefault();
this.items.push({
name: this.newItem.name,
start: this.newItem.start,
end: this.newItem.end,
description: this.newItem.description,
tags: this.newItem.tags,
notes: this.newItem.notes
})
}
这行得通，但很多重复。
问题：是否存在仅添加对象副本而非持久对象的内置方法。
在GitHub上查看此问题。
浅克隆
我一直在使用jQuery，
$.extend直到Evan You指出有一个未记录的内置扩展函数Vue.util.extend可以进行浅表克隆。因此，您可以使用的是：请参阅更新的Fiddle。
深克隆
在引用其他对象的对象上进行浅表克隆时，可以将引用复制到外部对象，而不是克隆它们。要完全克隆对象，请执行Deep Clone。
对于深层克隆，按照第一个链接中Evan的建议，可以使用：
JSON.parse(JSON.stringify(object))。这在小提琴和小提琴之间可见一斑。如果使用lodash，请检查lodash cloneDeep。如果使用NPM，请检出clone-deep。