vue3中的对象时为proxy对象如何获取值(两种方式)

目录
  • 第一种获取target值的方式：
  • 第二种获取target值
  • PS：vue3中获取proxy包裹的数据
    • 前言
    • 一、具体问题
    • 二、解决办法

使用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获取值内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue数据监听解析Object.defineProperty与Proxy区别

    目录 前言 Object.defineProperty 与 Proxy 的区别 在使用上的差异 总结与思考 前言 总能深深感觉到自己能力有限,写这篇文章的目的纯粹是因为发现在实际工作中,和一些小伙伴交流时发现,虽然有些小伙伴大概知道 vue2 与 vue3 的区别,但并没有去进一步思考一些深一点的东西.尽管能力有限,但想着自己在起步时候的艰难,就想着分享一下自己的一些看法,虽然不一定有多深入,但能引起大家的一些思考也是好的. Object.defineProperty 与 Proxy 的区别 其

  • Vue代理报错404问题及解决(vue配置proxy)

    目录 Vue代理报错404问题 第一种路径拼接 /api 情况 第二种路径不变情况 注意点 新增说明:配置多个代理怎么搞? 总结 Vue代理报错404问题 问题描述: 代理后出现404: 第一种路径拼接 /api 情况 const path = require('path'); function resolve(dir) { return path.resolve(__dirname, dir) } module.exports = { publicPath: process.env.NODE_

  • vue3响应式Proxy与Reflect的理解及基本使用实例详解

    目录 正文 理解Proxy与Reflect Proxy Reflect 实践示例 正文 在第四章中,作者讲述了Vue.js中响应式系统的设计与实现,这一块其实是整个框架的基石,也是MVVM中,ViewModel(VM)的重要组成部分. 其实在上一章中我已经感觉很难了,有一些操作作者也只是几笔带过,却很值得我们思考.这一张中,我们将目光着重于响应式数据本身,来完善上一章中我们的demo. 理解Proxy与Reflect vue3的响应式离不开Proxy,说到Proxy则离不开Reflect.这两个

  • Vue3使用Proxy实现数据监听的原因分析

    vue 数据双向绑定原理,而这个方法有缺点,并且不能实现数组和对象的部分监听情况;具体也可以看我之前写的一篇博客: 关于 Vue 不能 watch 数组 和 对象变化的解决方案,最新的 Proxy,相比 vue2 的 Object.defineProperty,能达到速度加倍.内存减半的成效.具体是怎么实现.以及对比旧的实现方法为啥能有速度加倍.内存减半的特性,下面我们来聊聊: Vue 初始化过程 Vue 的初始化过程,分别有Observer.Compiler和Watcher,当我们 new V

  • vue项目中常用解决跨域的方法总结(CORS和Proxy)

    目录 一.什么是跨域? 二.如何解决跨域? 总结 一.什么是跨域? 跨域问题的出现是因为浏览器的同源策略问题.所谓同源就是必须有以下三个相同点:协议相同.主机相同.端口相同.如果其中有一项不同,即出现非同源请求,就会产生跨域.当我们请求一个接口的时候,出现如:Access-Control-Allow-Origin 字眼的时候说明请求跨域了 二.如何解决跨域? 跨域的解决方案: jsonpcorsNode中间件代理(两次跨域) 即 Proxynginx反向代理 CORS支持所有类型的HTTP请求,

  • 为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)

    导 读 vue3.0中,响应式数据部分弃用了 Object.defineProperty ,使用 Proxy 来代替它.本文将主要通过以下方面来分析为什么vue选择弃用 Object.defineProperty . Object.defineProperty 真的无法监测数组下标的变化吗? 分析vue2.x中对数组 Observe 部分源码 对比 Object.defineProperty 和 Proxy 一.无法监控到数组下标的变化? 在一些技术博客上看到过这样一种说法,认为 Object.

  • vue3中的对象时为proxy对象如何获取值(两种方式)

    目录 第一种获取target值的方式: 第二种获取target值 PS:vue3中获取proxy包裹的数据 前言 一.具体问题 二.解决办法 使用vue3.0时,因为底层是使用proxy进行代理的所以当我们打印一些值得时候是proxy代理之后的是Proxy对象,Proxy对象里边的[[Target]]才是真实的对象. 第一种获取target值的方式: 通过vue中的响应式对象可使用 toRaw() 方法获取原始对象 //第一种获取target值的方式,通过vue中的响应式对象可使用toRaw()

  • 国产化中的 .NET Core 操作达梦数据库DM8的两种方式(操作详解)

    国产化中的 .NET Core 操作达梦数据库DM8的两种方式(操作详解)

    目录 背景 环境 SDK 操作数据库 DbHelperSQL方式 Dapper方式 背景 某个项目需要实现基础软件全部国产化,其中操作系统指定银河麒麟,数据库使用达梦V8,CPU平台的范围包括x64.龙芯.飞腾.鲲鹏等.考虑到这些基础产品对.NET的支持,最终选择了.NET Core 3.1. 环境 CPU平台:x86-64 / Arm64 操作系统:银河麒麟 v4 数据库:DM8 .NET:.NET Core 3.1 SDK 达梦自己提供了.NET操作其数据库的SDK,可以通过NuGet安装,

  • Python代码中引用已经写好的模块、方法的两种方式

    Python代码中引用已经写好的模块、方法的两种方式

    平时写的一些 Python 的代码,需要在其他模块里面复用.最粗狂的方法就是直接 copy 过去. 但这种方式太麻烦,copy 一堆代码,导致代码量也很多.copy 的也不爽. 下面就介绍两种方式,可以简洁明了地调用自己在其他模块写的代码. 个人推荐第二种方式. 方式一: 手动使用 sys 调用自己写的 Python 模块.方法 我的代码存在 E:\\PycharmProjects\\111 目录下.需要调用的代码是 mypy 下 my007.py 里的 funA() 方法. my007.py

  • golang中接口对象的转型两种方式

    接口对象的转型有两种方式: 1. 方式一:instance,ok:=接口对象.(实际类型) 如果该接口对象是对应的实际类型,那么instance就是转型之后对象,ok的值为true 配合if...else if...使用 2. 方式二: 接口对象.(type) 配合switch...case语句使用 示例: package main import ( "fmt" "math" ) type shape interface { perimeter() int area

  • JS访问对象两种方式区别解析

    可以使用下面两种方式访问对象的属性和方法 1.对象名.属性名 对象名.方法名() 2.对象名["属性名"] 对象名"方法名" var obj = { name : "小明", age : 18, say : function(){ console.log("我是"+this.name+"我"+this.age+"岁"); } }; console.log(obj.name); conso

  • C#复杂XML反序列化为实体对象两种方式小结

    C#复杂XML反序列化为实体对象两种方式小结

    目录 前言 需要操作的Xml数据 一.通过是手写的方式去定义Xml的实体对象模型类 二.通过Visual Studio自带的生成Xml实体对象模型类 1.首先Ctrl+C复制你需要生成的Xml文档内容 2.找到编辑=>选择性粘贴=>将Xml粘贴为类 3.以下是使用VS自动生成的Xml类 验证两个Xml类是否能够反序列化成功 C# XML基础入门(XML文件内容增删改查清) C#XmlHelper帮助类操作Xml文档的通用方法汇总 .NET中XML序列化和反序列化常用类和用来控制XML序列化的属

  • JavaScript为对象原型prototype添加属性的两种方式

    复制代码 代码如下: <script type="text/javascript"> <!-- /* 给原型 prototype 添加属性的两种方式 */ //方式一 var myObj = function(){ this.study = "JavaScript"; } myObj.prototype.hobby = function() { this.hobby = "See girl"; } var newObj = ne

  • javascript面向对象之访问对象属性的两种方式分析

    本文实例分析了javascript面向对象之访问对象属性的两种方式.分享给大家供大家参考.具体如下: javascript面向对象的访问对象属性的两种方式.如下代码所示: 复制代码 代码如下: <script language="javascript" type="text/javascript"> function Person(){}; var p1 = new Person(); p1.name="王美人"; document.

  • 详解springmvc 接收json对象的两种方式

    最近学习了springmvc 接收json对象的两种方式,现在整理出来,具体如下: 1.以实体类方式接收 前端 ajax 提交数据: function fAddObj() { var obj = {}; obj['objname'] = "obj"; obj['pid'] = 1 ; $.ajax({ url: 'admin/Obj/addObj.do', method: 'post', contentType: 'application/json', // 这句不加出现415错误:U

  • mybatis中批量插入的两种方式(高效插入)

    MyBatis简介 MyBatis是一个支持普通SQL查询,存储过程和高级映射的优秀持久层框架.MyBatis消除了几乎所有的JDBC代码和参数的手工设置以及对结果集的检索封装.MyBatis可以使用简单的XML或注解用于配置和原始映射,将接口和Java的POJO(Plain Old Java Objects,普通的Java对象)映射成数据库中的记录. 一.mybiats foreach标签 foreach的主要用在构建in条件中,它可以在SQL语句中进行迭代一个集合.foreach元素的属性主

随机推荐