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 }建立原始元素的淺拷貝 - 這將建立一個全新的對象，並複製原始物件的所有屬性。但要注意，如果原始物件的任何屬性包含數組/對象，你將面臨相同的問題...只是深度更深一層