vue3中的对象时为proxy对象如何获取值(两种方式)
更新时间：2023年01月18日 15:03:41 作者：zhang305
使用vue3.0时，因为底层是使用proxy进行代理的所以当我们打印一些值得时候是proxy代理之后的是Proxy<BR>对象，Proxy对象里边的[[Target]]才是真实的对象，那么如何获取这个值呢，下面下面给大家介绍两种方式，感兴趣的朋友一起看看吧
使用vue3.0时，因为底层是使用proxy进行代理的所以当我们打印一些值得时候是proxy代理之后的是Proxy
对象，Proxy对象里边的[[Target]]才是真实的对象。
第一种获取target值的方式：
通过vue中的响应式对象可使用 toRaw() 方法获取原始对象
//第一种获取target值的方式，通过vue中的响应式对象可使用toRaw()方法获取原始对象
import { toRaw } from '@vue/reactivity'
var list = toRaw(store.state.menuList)或着如下图的引入方式，用
let obj=toRaw(props.formAllValue)
第二种获取target值
//第二种获取target值的方式，通过json序列化之后可获取值 JSON.parse(JSON.stringify(store.getters.menuList))
PS：vue3中获取proxy包裹的数据
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
前言
在进行 vue3+ts+elementplus 重构vue2项目时遇到了关于proxy的问题
一、具体问题
使用el-upload组件进行图片上传，然后绑定handleChange方法进行图片改变的监听，将上传的图片push到fileList数组中。
const handleChange: UploadProps['onChange'] = (file, fileList1) => {
//当改变时，将fileList1push到fileList数组，然后用fileList进行之后的处理
fileList.push(fileList1)
console.log('测试',fileList)
}然后声明一个form表单，对数组进行遍历，插入form表单。此时发现问题：fileList是proxy对象
如图所示，fileList数组被proxy包裹
二、解决办法
查资料了解到：vue3使用proxy代替vue2的object.defineProperty，相当于在对象前设置的“拦截”
可以利用序列化获取，因为这里所取值为数组第一项，所以修改为：
JSON.parse(JSON.stringify(fileList))[0]
输出如图
综上，解决了取出proxy中数据的方法，然后就是对其foreach遍历等操作
到此这篇关于vue3中的对象时为proxy对象如何获取值(两种方式)的文章就介绍到这了,更多相关vue3获取值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
antd Select下拉菜单动态添加option里的内容操作
这篇文章主要介绍了antd Select下拉菜单动态添加option里的内容操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了vue如何加载本地json数据，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要为大家详细介绍了原生echart和vue-echart的使用，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-02-02
这篇文章主要介绍了vue element-ui导航实现全屏/取消全屏功能,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
分页功能是常见的需求之一，本文主要介绍了Vue前端利用slice()方法实现分页器，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-07-07
这篇文章主要给大家介绍了关于多个Vue项目部署到服务器的相关资料，文中通过图文介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-10-10
这篇文章主要介绍了iView-admin 动态路由问题的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-10-10
本文主要介绍了Vue实现未登录跳转到登录页的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
vite+ts vite.config.ts使用path报错问题及解决
这篇文章主要介绍了vite+ts vite.config.ts使用path报错问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
本文主要介绍了vue3组件库添加脚本的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-06-06
最新评论