vueJs更新道具，即使我是方法变量

Question

我有以下方法比较两个数组，一个来自props，另一个来自我自己的组件。存在于props数组中但不存在于components数组中的每个元素都插入到第三个数组中，并添加了名为"的属性；destroy:true；这样我就可以把它发送到后端，从数据库中删除。

然而，无论出于什么原因，我的道具正在更新，而不是我在方法中使用的变量。我真的不知道为什么，因为我没有直接引用prop，但我确实将其内容复制到方法中的变量中。

updateArray(){
let updatedArray = []
let oldArray = [...this.props.array]
oldArray.forEach(element => {
if(this.componentArray.indexOf(element) > -1){
updatedArray.push(element)
}else{
let newElement = element
newElement.destroy = true
updatedArray.push(newElement)
}
})
return updatedArray 
},

为什么会发生这种情况？除此之外，我的组件中的其他所有元素都可以正常工作。

Answer 1

是的，您正在将this.props.array数组的元素复制到该方法本地的新数组中，但假设数组的元素是对象，两个数组最终都包含相同的对象(对对象的引用(

您可以使用排列运算符let newElement = { ...element }创建原始元素的浅层副本-这将创建全新的对象并复制原始对象的所有属性。但请注意，如果原始对象的任何属性包含数组/对象，您也会遇到同样的问题。。。只下降一级