vue3网络请求到的数据为proxy对象时，如何获取值

最新推荐文章于 2024-07-30 23:06:43 发布
最新推荐文章于 2024-07-30 23:06:43 发布
阅读量1.4k 收藏 2
点赞数 1
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhanglixin999/article/details/133299554
版权

第一种：通过vue中的响应式对象可使用toRaw()方法获取原始对象

import { toRaw } from 'vue'
const trueUserList=toRaw(userList)
第二种：通过json序列化

JSON.parse(JSON.stringify(userList))
特别注意：vue3使用proxy，对于对象和数组都不能直接整个赋值

 

小道士写程序
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Vue3 - 获取 Proxy 对象代理中包裹的 “真实数据“，解决对象或数组打印后是 Proxy 对象无法拿到原始数据的问题（提供 2 种详细解决方案）
王佳斌
03-01 1万+
vue3如何取出proxy对象的值，vue3 Proxy 对象怎么获取到真实数据，vue3中的对象时为proxy对象如何获取值，vue3 获取ref里Proxy里的数据，vue3获取reactive中Proxy里的数据，vue3中如何获取proxy包裹的数据，vue3为什么里面的数据都是proxy对象类型，vue3中获取proxy包裹的数据,拿到原始对象，vue3数据变成了proxy如何解决，vue3中的对象时为proxy对象,如何获取值，vue3中获取proxy原始对象的问题，vue3获取proxy代理对
vue3.0中从proxy中取值
weixin_44384273的博客
02-01 1914
vue3.0 proxy
vue2,vue3跨域配置proxy代理，以及pathRewrite的一些问题，及获取真实请求地址
qq_44766357的博客
06-04 1439
请求接口为：http://api.zhuishushenqi.com/cats/lv2/statistics。
vue 本地环境跨域请求proxyTable的方法
10-17
在开发Vue.js应用程序时，经常会遇到因同源策略限制而无法进行跨域请求的问题。为了解决这个问题，Vue CLI提供了一个便捷的解决方案，即通过配置`proxyTable`来代理API请求。本文将详细介绍如何在Vue的本地环境中...
vue2.0设置proxyTable使用axios进行跨域请求的方法
08-29
ProxyTable 是一个对象，其中每个键是要代理的 URL pattern，值是要代理到的目标 URL。 例如，在我们项目的配置文件 `config/index.js` 中，我们可以添加以下代码来设置 ProxyTable： ```javascript module....
vue proxy 的优势与使用场景实现
10-15
在 Vue 2.x 版本中，数据响应式主要是通过 `Object.defineProperty` 来实现的，而在 Vue 3.x 中，引入了 `proxy` 作为新的响应式系统的基础。这篇文章将深入探讨 `proxy` 的优势和使用场景，并通过实例对比 `proxy` ...
vue 使用axios 数据请求第三方插件的使用教程详解
12-04
安装axios是为了发起HTTP请求，vue-axios是为了让axios更好地与Vue集成，qs则是用于处理POST请求时的数据格式化，因为默认的POST请求数据格式是x-www-form-urlencoded，可能不被某些后端API接受。 在Vue项目中使用...
vue proxyTable 接口跨域请求调试的示例
12-12
这是因为浏览器出于安全考虑，实施了同源策略（Same-origin policy），限制了JavaScript从一个源获取另一个源的数据。然而，为了在本地开发环境中调试远程服务器上的API，我们需要绕过这个限制。Vue.js为此提供了一...
【前端】vue 报错:The template root requires exactly one element
程序员-张师傅
07-25 926
在 Vue.js 中，当你遇到错误 “The template root requires exactly one element” 时，这通常意味着你的 Vue 组件的模板（template）根节点不是单一的元素。Vue 要求每个组件的模板必须有一个根元素来包裹所有的子元素。如果你的模板看起来像这样，就会出现这个错误：
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 431
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
js、ts、argular、nodejs学习心得
07-30 215
工作中需要前端argular开发桌面程序，后端用nodejs开发服务器，商用软件架构。
苍穹外卖浏览器前端界面修改
程序员象漂亮的博客
07-25 280
客户原始方案是期望做一个Spring Boot + Vue的饿了么系统，但时间上太仓促，所以建议选择开源的苍穹外码目作为作业提交。客户接受了建议的方案后，期望对前端页面提出了一些个性化的定制修改。
electron 主进程和渲染进程
qq_21087199的博客
07-29 281
虽然最近一年前端大环境不好，但是大家还是要加油鸭！，努力总不会错，千军万马过独木桥，希望大家都是闯过去那一个。进入正题。
基于上云api前端开发经验教训(loading...)
IIIIIAN
07-26 447
对于上云api开发学习过程中的错误教训积累总结
前端 axios 封装
清云
07-29 447
前端 axios 封装
我们的前端开发逆天了！1 小时搞定了新网站，还跟我说 “不要钱”
努力做最接地气的编程干货分享，感谢关注
07-29 1310
本文将带你了解一个新的 Web 框架 **Astro**，并手把手带你使用 Astro 搭建一个属于自己的站点，用过的都说真香！
前端代码混淆加密（使用Terser、WebpackObfuscator）
最新发布
@Fonden
07-30 266
（注意Terser和WebpackObfuscator引入的方式不同，后者是放到plugins中）② 在 Terser 之后使用 WebpackObfuscator 进行混淆。以此在网上查找到相应工具有：Terser、WebpackObfuscator。① 使用 Terser 进行代码压缩和 source map 生成，② 设置在生产环境中才去使用混淆加密工具（开发环境会产生各种报错）为了对公司项目进行安全防护措施，前端需要进行代码混淆加密处理。压缩代码、变量和函数名混淆、删除未使用代码。
【前端面试3+1】20 css三栏布局6种实现方式、多行文本溢出怎么实现、token过期了怎么处理、【二叉树的中序遍历】
qq_61798306的博客
07-30 489
本文包含八股文：css三栏布局6种实现方式、多行文本溢出怎么实现、token过期了怎么处理，算法【二叉树的中序遍历】
前端开发技术之HTML/CSS
m0_67484548的博客
07-29 717
5. <figure> 和 <figcaption>：<figure> 用于媒体内容的分组，<figcaption> 用于定义 <figure>1. <menu> 和 <menuitem>：定义菜单列表（<menu>）和菜单项（<menuitem>）（HTML5。1. <h1> to <h6>：定义HTML标题，<h1> 表示最高的标题级别，<h6> 表示最低的标题级别。3. <figure> 和 <figcaption>：定义媒体内容的分组，以及媒体的标题或说明。
vue3 Proxy(Array)为空 但接口有数据
05-30
在Vue 3中使用Proxy监听一个数组时，如果发现它为空，但是接口确实有返回数据，可能是因为在使用Proxy监听数组时没有正确地设置Proxy的handler。在Vue 3中，可以使用`reactive`函数将对象转换为响应式对象，也可以使用`ref`函数将基本类型的值转换为响应式对象。然而，在Vue 3中，如果想要将数组转换为响应式对象，应该使用`toRefs`函数或者手动设置Proxy的handler。具体做法如下： 使用`toRefs`函数将数组转换为响应式对象： ```javascript import { toRefs } from 'vue'; const myArray = ref([]); // 在异步请求完成后，将数据赋值给myArray myArray.value = [1, 2, 3]; // 将myArray转换为响应式对象 const myArrayRefs = toRefs(myArray); console.log(myArrayRefs); // {0: 1, 1: 2, 2: 3} ``` 手动设置Proxy的handler： ```javascript const myArray = []; // 在异步请求完成后，将数据赋值给myArray myArray = [1, 2, 3]; // 设置Proxy的handler const myArrayProxy = new Proxy(myArray, { get(target, prop, receiver) { return Reflect.get(target, prop, receiver); }, set(target, prop, value, receiver) { Reflect.set(target, prop, value, receiver); return true; }, // ...其他数组操作的转发 }); console.log(myArrayProxy); // [1, 2, 3] ``` 在上面的例子中，我们手动设置了Proxy的handler，通过Reflect对象来转发数组操作，确保Proxy监听的是原始数组。你需要根据你的具体情况来设置handler中的其他数组操作的转发。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小道士写程序

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值