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

文章不知道大家是否熟悉？今天我将给大家介绍《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
);

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~