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本身不能直接对对象数组去重，需要先将对象转换为可比较的类型（如字符串）。
