Vue.js仍然更新了props，尽管我是一个方法变量

Question

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

然而，由于某种原因，我的props被更新了，而不是我在方法中使用的变量。我不太确定为什么会这样，因为我没有直接引用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 }创建原始元素的浅拷贝 - 这将创建一个全新的对象，并复制原始对象的所有属性。但要注意，如果原始对象的任何属性包含数组/对象，你将面临相同的问题...只是深度更深一层