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数据赋值