vue3中如何获取proxy包裹的数据
更新时间：2022年05月25日 09:57:36 作者：Annimuss
这篇文章主要介绍了vue3中如何获取proxy包裹的数据，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
如何获取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 使用proxy 来代替vue2 的 Object.defineProperty
- 效率更高，值得我们学习
基本使用
<script>
var target = {
name: "xiaoming",
age: 18
}
// handler 是一个对象
const handler = {
set(target, prop, value) {
let result = Reflect.set(target, prop, value)
console.log("设置的操作" + result)
return true;
},
get(target, value) {
let result = Reflect.get(target, value)
console.log("获取的的操作" + result)
}
}
let proxy = new Proxy(target, handler);
proxy.coure = "java"
console.log(proxy)
</script>
这个打印效果：
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue+Spring Boot简单用户登录，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-11-11
这篇文章主要介绍了Vue一个案例引发的递归组件的使用，本文主要给大家展示如何在项目中使用递归组件，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2018-11-11
这篇文章主要介绍了Vue基本指令实例图文讲解，文章将基本指令讲解的很清楚，有对于指令不太懂的同学可以跟着学习研究下2021-02-02
这篇文章主要介绍了vue计算属性get和set用法,结合实例形式分析了计算属性的功能及get和set用法的具体使用技巧,需要的朋友可以参考下2019-02-02
本篇文章主要介绍了VUE开发一个图片轮播的组件示例代码，对图片轮播效果感兴趣的小伙伴们可以参考一下。2017-03-03
Vite+TS+Vue开启eslint和prettier规范及校验方式
这篇文章主要介绍了Vite+TS+Vue开启eslint和prettier规范及校验方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。下面通过本文给大家分享Vue.js组件通信的几种姿势，感兴趣的朋友一起看看吧2017-10-10
这篇文章主要介绍了Vue3新增时自动获取当前时间的操作方法,本文通过实例代码图文相结合给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-07-07
这篇文章主要介绍了关于vue3中setup函数的使用，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了vue3如何自定义message弹窗问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-04-04
最新评论