Vue3如何获取proxy对象的值而不是引用的方式
更新时间：2023年10月23日 15:06:41 作者：Mao.O
这篇文章主要介绍了Vue3如何获取proxy对象的值而不是引用的方式,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
情景
vue3中定义一个响应式对象：
let obj1 = reactive({userName:"tom", age:5, hobby:{a:"av",b:"bv"}});
打印obj1，结果为proxy对象
定义第二个响应式对象：
let obj2 = reactive({
userName:"",
age:"",
hobby:{}
})
将对象obj1赋值给对象obj2
obj2 = obj1
赋值没问题
但是！当我们修改两个对象中的一个，那么另一个对象会和被修改的对象同步。
例如：当我们修改obj2的 age为8后，那么obj1的值也会变为8。
这是因为当我们执行obj2 = obj1时，我们赋值给obj2的并不是obj1的内容，而是obj1的内存引用。
解决
目的：获取proxy对象的值
方式一：扩展运算符
obj2 = {...obj1}
方式二：Object.assign()
obj2 = Object.assign({}, obj1);
获取深层对象值
obj2.hobby = {...obj1.hobby}
or
obj2.hobby = Object.assign({}, obj1.hobby);到此这篇关于Vue3如何获取proxy对象的值而不是引用的方式的文章就介绍到这了,更多相关Vue3获取proxy值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
今天小编就为大家分享一篇vue移动端弹框组件的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了Vue中select下拉框的默认选中项的三种情况解读，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
关于element ui中的el-scrollbar横向滚动问题
这篇文章主要介绍了关于element ui中的el-scrollbar横向滚动问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了vue-cli3.0使用及部分配置详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
vxe-table vue 表格禁用单元格编辑的两种实现方式
本文介绍vxe-table禁用单元格编辑的两种方式,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2025-06-06
Vue 3.0是一个非常流行的JavaScript框架,不仅易于学习和使用,而且可以与许多UI框架集成,下面这篇文章主要给大家介绍了关于vue3.0+ts引入详细步骤以及语法校验报错问题的解决办法,需要的朋友可以参考下2024-01-01
这篇文章主要介绍了vue3中使用medium-zoom方法的相关资料,Medium Zoom是一个轻量级的JavaScript库,用于实现类似Medium网站的图片点击放大缩放效果,文中通过代码介绍的非常详细,需要的朋友可以参考下2026-03-03
使用vant作为UI组件时,需要一个日期时间选择器,vant中有Dateicker和TimePicker,可以将两个组件组合封装使用,下面就来详细的介绍一下2025-12-12
这篇文章主要为大家详细介绍了vue实现表单验证功能，基于NUXT的validate方法实现，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
当市面上主流的组件库不能满足我们业务需求的时候,那么我们就有必要开发一套属于自己团队的组件库,下面这篇文章主要给大家介绍了一个基于vue3+ts+vite项目搭建的相关资料,需要的朋友可以参考下2022-05-05
最新评论