Vue3中ref数组去重后出现Proxy(Object)是什么原因？

Vue3中使用ref修饰的数组去重后出现`Proxy(object)`？本文针对Vue3项目中ref修饰的数组对象使用Set等方法去重后出现`Proxy(object)`问题，深入分析其原因：ref返回的是代理对象而非原始数据，Set将代理对象视为独立元素。解决方案是使用`toRaw`函数将ref对象转换为原始JavaScript对象后再进行去重操作，并提供示例代码，包含`JSON.stringify`和`JSON.parse`方法处理对象数组去重，确保最终结果正确，避免`Proxy(object)`的干扰，有效解决Vue3开发中的常见问题。

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)是什么原因？》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！