场景:

在vue中,我在data定义了变量,接收到了后台的数据,数组类型

我把它传递给了子组件,但是我并不想直接改变这个数据

于是我定义了一个空的数组,把当前数据赋值给了它。

但是,我们都知道,数组所指向的是内存地址,直接赋值会使它们指向同一地址。(深拷贝和浅拷贝)

那么问题就来了,当我改变其中一个数组的值,另一个数组也会随之发生变化。

其实解决办法最简单粗暴的办法就是循环数据数组,然后把每一项push到新数组,但是代码真的很不友好,写起来复杂。

解决办法:

我采用了es6的数组解构赋值,和扩展运算符结合的方式

const newArr = [ ...this.result ]

但是我发现并没有解决我的问题。

我排查原因,并尝试解决办法,发现简单的数组类型是可以成功的,但是如果数组中嵌套的对象,那么这样还是不能解决我的问题。

网上查阅资料,最终参考另一位博主的文章,找到了解决办法。

const newArr = JSON.parse(JSON.stringify(this.result))

这里先把数组转为json字符串,再转为json对象进行赋值,成功解决问题。

附上参考文章的地址:https://blog.csdn.net/u014054437/article/details/80415174

Logo

前往低代码交流专区

更多推荐