js數組賦值，改變其中一個，另一個數組也會改變（vue中數據綁定）

1，問題背景和原因

在vue中，我在data定義了變量，接后台數據，數組中存的是對象，具體數據類型如下：

data () { return { selectAssetList: { applyTemplateDetailList: [] }, applyTemplate: { templateName: '', status: 'in_use', applyTemplateDetailList: [] } } }

 

之后我對兩個數組分別賦值，如下：

this.selectAssetList.applyTemplateDetailList = resp.data this.applyTemplate.applyTemplateDetailList = resp.data

當其中一個數組對象的某一個屬性改變時，另一個也會改變

我們都知道，數組所指向的是內存地址，直接賦值會使它們指向同一地址。（深拷貝和淺拷貝）

2，一般解決辦法

this.selectAssetList.applyTemplateDetailList = [...resp.data] this.applyTemplate.applyTemplateDetailList = [...resp.data]

顯然這種辦法是不能解決我的問題，原因是當這個數組沒有嵌套對象和其他數據時，這種方法是可以的

（形如：applyTemplateDetailList: []   賦值：this.applyTemplateDetailList = [...resp.data]）

3，最終解決辦法

this.selectAssetList.applyTemplateDetailList = JSON.parse(JSON.stringify(resp.data))
this.applyTemplate.applyTemplateDetailList = JSON.parse(JSON.stringify(resp.data))

把要賦值的數據轉成json字符串，然后再轉成json數據賦值