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

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

在 vue3 中，利用 set 进行数组去重操作后，可能会额外出现 proxy(object) 的数据，原因如下：

1. ref 数据处理

vue3 中使用 ref 出来的数据经过特殊处理。如果您在数组去重过程中使用的是 ref 出来的数据，则需要调用 toraw 方法来去除该处理。

示例：

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

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

修改后：

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

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

2. 对象数组去重

默认情况下，set 无法对对象数组进行去重。如果您需要对对象数组去重，需要将对象转换为字符串后再进行去重。

示例：

obj.serviceAttributeList = [...new Set(result.map(JSON.stringify))].map(
  JSON.parse
);