直接赋值导致响应式断开，前端深浅拷贝

title: 直接赋值导致响应式断开，前端深浅拷贝
date: 2024-06-08 09:56:05
tags: vue3

vue3中的ref对象的深浅拷贝问题，实际应用出现的相关的问题。

概念总述

浅拷贝

仅仅复制了数据，没有改变他原来的引用。

表现：当你对新对象进行修改的时候，会影响到你拷贝的本来对象。

深拷贝

复制了原来的数据，改变了数据原来的引用，放在了分配了数据的新的地址。

表现：对新的数据的属性进行减少和怎加的时候，不会影响到原来的数据。

实战状况

在vue3中使用一个ref({})对象，{}中有若干属性，笔者需要过滤数据，需要过滤掉一些不用的属性，但是还需要保留原来的数据。

决定从原来的数组（rowdata）中复制一个新对象（newdata），在newdata过滤后传给后端，这样我rowdata中的值就不受相关的影响了，还能将过滤后的数据通过新对象newdata传递给后端。

问题：这个时候就出现了拷贝问题。传递了newdata后，发现rawdata的数据居然也变成了过滤后的数据。这就体现了一个深浅拷贝的问题了。

浅拷贝

//版本一
const newdata.value=rowdata.value
//版本二
const newdata = ref(rowdata.value)

深拷贝

const newdata = JSON.parse(JSON.stringify(rowdata.value));

总结：个人认为这种深浅拷贝出现的原因是为了省内存。