本文主要是介绍直接赋值导致响应式断开,前端深浅拷贝,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
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));
总结:个人认为这种深浅拷贝出现的原因是为了省内存。
这篇关于直接赋值导致响应式断开,前端深浅拷贝的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!