Vue3中使用ref修饰的数组对象去重后出现Proxy(object)的解决方法
在Vue3项目开发中，对用ref修饰的数组对象进行去重操作（例如使用Set）时，有时会遇到结果中出现Proxy(object)的情况。本文分析原因并提供解决方案。
问题： ref修饰的数组对象去重后，Set或其他去重方法会将ref生成的代理对象本身也视为一个独立元素，导致结果包含Proxy(object)。
原因： ref在Vue3中返回的是一个代理对象，而非原始数据。Vue3追踪这些代理对象以实现响应式更新。直接将ref对象传入Set，Set会将代理对象作为独立元素处理。
立即学习“前端免费学习笔记（深入）”；
解决方案： 使用toRaw函数将ref对象的代理对象转换为原始JavaScript对象。在去重之前，先用toRaw处理，再进行去重操作。
示例代码： 假设addserviceobject是一个用ref修饰的对象，包含serviceattributelist数组。
import { ref, toRaw } from 'vue';const obj = ref({ serviceattributelist: [ { name: 'duo' }, { name: 'emma' }, { name: 'duo' } // 重复元素 ],});// 使用toRaw获取原始数据const rawList = toRaw(obj.value.serviceattributelist);// 使用Set去重，对对象数组去重需要先转换为字符串再转换回对象const uniqueList = [...new Set(rawList.map(item => JSON.stringify(item)))].map(item => JSON.parse(item));// 更新ref对象obj.value.serviceattributelist = uniqueList;console.log(obj.value.serviceattributelist);
这段代码先用toRaw获取serviceattributelist的原始数据，然后使用JSON.stringify将对象转换为字符串进行去重，最后用JSON.parse转换回对象数组，并更新ref对象。 这确保了去重操作只作用于对象的值，避免了Proxy(object)的出现。
通过以上方法，可以有效避免Vue3中ref数组对象去重时出现Proxy(object)的问题，确保程序的正确运行。 记住，Set本身不能直接对对象数组去重，需要先将对象转换为可比较的类型（如字符串）。
以上就是Vue3中ref数组去重后出现Proxy(Object)是什么原因？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/180027.html
微信扫一扫 
支付宝扫一扫 
