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的路由及路由钩子函数的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-07-07
Vue.js每天必学之构造器与生命周期，告诉大家什么是Vue.js构造器与生命周期，感兴趣的小伙伴们可以参考一下2016-09-09
这篇文章主要介绍了如何修改vuex里面的数据问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-04-04
下面小编就为大家分享一篇基于vue2.0动态组件及render详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要给大家介绍了关于Vue入门的相关资料，是一篇超完整的Vue入门教程，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-11-11
这篇文章主要介绍了Vue snippets插件原理与使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2022-10-10
vue.js vue-router如何实现无效路由(404)的友好提示
众所周知vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用，下面这篇文章主要给大家介绍了关于vue.js中vue-router如何实现无效路由(404)的友好提示的相关资料，需要的朋友可以参考下。2017-12-12
在Vue.js开发中,我们经常需要创建可复用的组件,这些组件可能会有自己的样式规则,而有时我们希望父组件能够影响子组件的样式,本文将详细介绍如何使用v-deep以及一些相关的最佳实践,需要的朋友可以参考下2024-10-10
Vuex的插件vuex-persistedstate数据持久化存储操作
这篇文章主要介绍了Vuex的插件vuex-persistedstate数据持久化存储操作,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-12-12
这篇文章主要介绍了Element Rate 评分的使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
最新评论