Vue3 中使用 ref 创建数组,为什么去重后会出现 Proxy(Object) 数据?

vue3 中使用 ref 创建数组,为什么去重后会出现 proxy(object) 数据?

vue3 数组去重后出现 proxy(object) 数据的原因

vue3 中,当使用 ref 创建数据时,这些数据会经过特殊处理,可能导致数组去重后出现额外的 proxy(object) 数据。

出现这种情况通常是因为在使用 ref 创建的数组对象 obj 时,没有调用 toraw 函数将其转换为原始对象。以下示例演示了如何解决这个问题:

import { ref, toraw } from 'vue';const obj = ref({  serviceattributelist: [    {      name: 'duo',    },    {      name: 'emma',    },  ],});

在去重操作中,使用 toraw 转换 obj.value.serviceattributelist 为原始对象:

立即学习“前端免费学习笔记(深入)”;

const set = new set([...list, ...toraw(obj.value.serviceattributelist)]);

转换后的原始对象与原始数组进行去重,并将其结果赋值回 ref 创建的数组对象中:

obj.serviceAttributeList = [...new Set(result)];

需要注意的是,直接使用 new set 无法对对象数组进行去重,需要将对象转换为字符串后再进行去重,然后转换回对象。

以上就是Vue3 中使用 ref 创建数组,为什么去重后会出现 Proxy(Object) 数据?的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1497079.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月19日 19:10:26
下一篇 2025年12月19日 19:10:36

相关推荐

  • 什么是JS的类静态成员?

    JavaScript类静态成员属于类本身而非实例,通过static关键字声明,可直接用类名访问,常用于工具函数、常量定义、工厂方法和共享状态,静态方法不能访问实例属性,子类可继承和覆盖父类静态成员,最佳实践包括职责分离、避免滥用共享状态和清晰命名。 JavaScript的类静态成员,简单来说,就是那…

    2025年12月20日
    000
  • 如何调试热更新问题?

    答案是调试热更新需系统排查。首先检查开发服务器日志与浏览器控制台中的HMR错误信息,定位模块更新失败或语法错误;接着审查代码改动,排除全局副作用或不可热替换实例;确认模块是否正确接受更新,尤其在Webpack中使用module.hot.accept();分析框架HMR机制(如React Fast R…

    2025年12月20日
    000
  • 什么是JS的元编程?

    答案:JavaScript元编程通过Proxy和Reflect实现对象行为的拦截与转发,广泛应用于响应式系统、ORM、AOP、数据校验等场景,同时需注意性能开销、调试难度和兼容性问题,并可结合装饰器、Symbol、AST操作等特性扩展能力。 JavaScript元编程,说白了,就是代码自己能审视、修…

    2025年12月20日
    000
  • 如何用Node.js运行本地服务器?

    最直接的方式是使用Node.js内置http模块创建服务器,代码简洁且便于理解底层机制。示例中通过http.createServer监听3000端口,根据URL返回不同内容,访问根路径显示欢迎信息,/about返回关于页面,其他路径返回404。保存为server.js后运行node server.j…

    2025年12月20日
    000
  • 如何调试Node.js网络请求?

    答案:调试Node.js网络请求需结合内置工具、日志、外部工具和拦截器。首先使用node –inspect进行断点调试,查看变量和执行流程;通过console.log或日志库记录请求头、体、状态码等信息,追踪请求生命周期;利用cURL、Postman等工具模拟请求,验证接口行为;在客户端…

    2025年12月20日
    000
  • 浏览器JS传感器API?

    目前主流且常用的浏览器JS传感器API包括:1. DeviceOrientationEvent和DeviceMotionEvent,用于获取设备方向与加速度数据,支持倾斜控制与运动检测;2. AmbientLightSensor和ProximitySensor,基于W3C Generic Senso…

    2025年12月20日
    000
  • 怎样使用Node.js流处理数据?

    Node.js流处理通过可读、可写、双工和转换流实现高效数据处理,利用pipe()方法连接流并自动管理背压,结合stream.pipeline进行错误处理,适用于大文件、网络通信等场景,提升内存和时间效率。 在Node.js中处理数据,尤其当面对大量信息时,直接把所有内容加载到内存里往往不是一个好主…

    2025年12月20日
    000
  • 如何配置JS弹性伸缩?

    代码分割通过将JS应用拆分为按需加载的模块,减少初始加载时间,提升缓存效率,优化资源利用,从而实现前端弹性伸缩。 在前端领域,我们谈论“JS弹性伸缩”时,通常不是指服务器那种根据负载自动增减实例的物理扩容,而是指JavaScript应用本身,如何智能地根据用户设备、网络环境和交互需求,动态调整其资源…

    2025年12月20日
    000
  • 如何配置VS Code来调试JS?

    答案:在VS Code中调试JavaScript的核心是配置launch.json文件,针对Node.js环境使用”type”: “node”并设置”program”指向入口文件,针对浏览器环境使用”type&#82…

    2025年12月20日
    000
  • 浏览器JS权限API有哪些?

    浏览器JS权限API涵盖地理位置、摄像头、麦克风、通知、剪贴板等,均需用户授权以保障隐私安全。常见API包括Geolocation API获取位置,MediaDevices API访问音视频设备,Notifications API发送通知,Clipboard API读写剪贴板,以及Web Push、…

    2025年12月20日
    000
  • 如何调试状态管理问题?

    答案是通过可视化工具、日志记录、事件追溯和模块化设计来快速定位状态变化源头。使用Redux/Vuex DevTools实现时间旅行调试,结合logger中间件追踪action与状态变化,利用断点和调用栈回溯触发源,借助不可变性检测防止非法修改,并通过单元测试预防问题,同时在复杂应用中采用清晰的架构分…

    2025年12月20日
    000
  • 如何配置JS依赖管理?

    现代JavaScript项目依赖管理通过包管理器(npm/Yarn)和模块打包器(Webpack/Vite)协同实现。首先初始化package.json文件,通过npm install或yarn add命令安装生产依赖和开发依赖,依赖项分别记录在dependencies和devDependencie…

    2025年12月20日
    000
  • 如何安装并使用npm包?

    答案:安装并使用npm包需先通过npm安装包到项目或全局,再在代码中引用或命令行运行。具体为:1. 确保已安装Node.js和npm;2. 局部安装使用npm install ,将包存入项目node_modules并记录依赖;3. 全局安装使用npm install -g ,用于命令行工具,可在任意…

    2025年12月20日
    000
  • 什么是JS的尾调用优化?

    JavaScript的尾调用优化(TCO)虽被ES6规范提及,但因影响调试体验、兼容性问题及实际收益有限,主流引擎未普遍实现。 JavaScript的尾调用优化(Tail Call Optimization, TCO)是一种编译器或解释器层面的性能优化技术,它能让满足特定条件的函数调用在执行时避免创…

    2025年12月20日
    000
  • JavaScript动态生成Bootstrap卡片:API数据展示的实践指南

    本教程详细指导如何利用JavaScript动态生成Bootstrap卡片,以优雅地展示API数据或用户输入结果。通过为动态创建的DOM元素添加相应的Bootstrap类,开发者可以轻松构建结构清晰、样式专业的响应式内容布局,提升网页的用户体验和视觉效果。 引言:动态内容与Bootstrap卡片的需求…

    2025年12月20日
    000
  • 如何配置JS容灾方案?

    配置JavaScript容灾方案的核心是构建韧性前端应用,确保关键JS资源加载失败或执行出错时,用户体验仍不受严重影响。通过多源加载、SRI校验、全局错误捕获、异步加载、Service Worker缓存及优雅降级等多维度策略,实现应用在CDN故障、网络波动或部署失误下的稳定运行。结合真实用户监控、合…

    2025年12月20日
    000
  • 如何调试性能瓶颈问题?

    答案:性能瓶颈的调试需先定位问题、分析根源再优化,涉及监控、日志、profiling等手段,常见表现包括响应变慢、CPU内存占用高、I/O等待等,不同技术栈工具有共通逻辑但各有侧重,优化需从代码、架构、基础设施等多层面系统性推进。 调试性能瓶颈,核心在于定位问题、理解其根源,然后对症下药。这就像给一…

    2025年12月20日
    000
  • 如何调试压缩后代码问题?

    答案:调试压缩代码需依赖Source Map和浏览器工具。首先检查Source Map是否生效,若缺失则使用浏览器美化功能格式化代码,结合console.log、debugger语句、本地复现、版本回溯等方法定位问题,同时确保构建配置正确生成并部署匹配的Source Map文件。 调试压缩后的代码,…

    2025年12月20日
    000
  • Node.js中事件循环机制是什么?

    Node.js事件循环是其非阻塞I/O的核心机制,通过调用栈、回调队列、微任务队列和libuv的线程池协同工作,实现高效并发。它在单线程JavaScript环境中,将异步操作外包给底层系统,完成后通过事件循环调度回调执行。微任务(如Promise、process.nextTick)优先于宏任务(如s…

    2025年12月20日
    000
  • 如何配置Babel转译ES6+代码?

    配置Babel转译ES6+代码的核心是使用@babel/preset-env和core-js。首先安装@babel/core、@babel/cli、@babel/preset-env和core-js,然后在项目根目录创建babel.config.js文件,配置presets为@babel/prese…

    2025年12月20日
    000

发表回复

登录后才能评论
关注微信