Question

我想保存一个原始数组并使用表单（在child vue组件中）修改副本。但是，当副本被修改时，原点也将被修改。

我尝试过：

this.updatedDatas = [...this.initialList]
this.updatedDatas = this.initialList.map((x)=> x)
this.updatedDatas = Array.from(this.initialList)

父脚本：

this.initialList = [{name: 'John'}, {name: 'Isa'}]
this.updatedDatas = [...this.initialList]

父模板：

<form-child :item="updatedDatas[1]" />

子模板：

<textarea v-model="item.name"></textarea>

子脚本：

this.$emit('updated', this.item)

Answer 1

您需要对数组进行深层复制，否则您将最终得到两个具有相同对象引用的数组。深层副本将重新创建其中的对象和数组的内部。

您可以使用打包线lodash或构建自己的包装线。

外部库将为您提供“无限”的深度，但这将为您提供2个级别，对于您来说足够了。

this.updatedDatas = this.initialList.map(i => ({...i});

用于深度复制的其他资源