使用vue3.0时，因为底层是使用 Proxy 进行代理的所以当我们打印一些值得时候是 PR oxy代理之后的是Proxy
对象，Proxy对象里边的[[T arg et]]才是真实的对象。
第一种获取target值的方式：
通过vue中的响应式对象可使用 toRaw() 方法获取原始对象
//第一种获取target值的方式，通过vue中的响应式对象可使用toRaw()方法获取原始对象
import { toRaw } From '@vue/reactiv IT y'
VAR list = toRaw( Store . stat e.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. define Pro PE rty，相当于在对象前设置的[拦截]
可以 利用 序列化获取，因为这里所取值为数组第一项，所以修 改为 ：
JSON.parse(JSON.stringify(fileList))[0]
输出如图
综上，解决了取出proxy中数据的方法，然后就是对其for each 遍历等操作
到此这篇关于vue3中的对象时为proxy对象如何获取值(两种方式)的文章就介绍到这了,更多相关vue3获取值内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！
您可能感兴趣的文章: 手摸手教你实现Vue3 Reactivity Vue3源码分析调度器与watch用法原理 Vue3中正确使用ElementPlus的示例代码 vue中下拉框组件的封装方式 vue3源码分析reactivity实现原理
总结
以上是 为你收集整理的 vue3中的对象时为proxy对象如何获取值(两种方式) 全部内容，希望文章能够帮你解决 vue3中的对象时为proxy对象如何获取值(两种方式) 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于vue3中的对象时为proxy对象如何获取值(两种方式)的详细内容...