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组件之间的通信，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-02-02
这篇文章主要为大家介绍了vue3超出文本展示el tooltip实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
这篇文章主要介绍了解决vue+elementui项目打包后样式变化问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
vue对象添加属性(key:value)、显示和删除属性方式
这篇文章主要介绍了vue对象添加属性(key:value)、显示和删除属性方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
这篇文章主要介绍了Vue多布局模式实现方法，多布局模式可以根据用户角色所在场景切换页面布局，是非常常见的基础功能，感兴趣的同学可以参考下文2023-05-05
vue 路由懒加载中给 Webpack Chunks 命名的方法
这篇文章主要介绍了在 vue 路由懒加载中给 Webpack Chunks 命名的方法，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-04-04
实现暗黑主题的方式有很多种,也有很多成型的框架可以直接使用,下面这篇文章主要给大家介绍了关于基于vue3&element-plus的暗黑模式的相关资料,需要的朋友可以参考下2022-12-12
这篇文章主要介绍了vue项目打包后怎样优雅的解决跨域,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
大家应该都知道可以通过vue-router官方提供的一个api-->addRoutes可以实现路由添加的功能,事实上就也就实现了用户权限,这篇文章主要给大家介绍了关于Vue项目中使用addRoutes出现问题的解决方法,需要的朋友可以参考下2021-08-08
这篇文章主要介绍了关于Vue-cli3烦人的eslint问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
最新评论