Vue3 中使用 ref 创建数组，为什么去重后会出现 Proxy(Object) 数据？

积累知识，胜过积蓄金银！毕竟在文章开发的过程中，会遇到各种各样的问题，往往都是一些细节知识点还没有掌握好而导致的，因此基础知识点的积累是很重要的。下面本文《Vue3 中使用 ref 创建数组，为什么去重后会出现 Proxy(Object) 数据？》，就带大家讲解一下知识点，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

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

vue3 中，当使用 ref 创建数据时，这些数据会经过特殊处理，可能导致数组去重后出现额外的 proxy(object) 数据。

出现这种情况通常是因为在使用 ref 创建的数组对象 obj 时，没有调用 toraw 函数将其转换为原始对象。以下示例演示了如何解决这个问题：

import { ref, toraw } from 'vue';

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

在去重操作中，使用 toraw 转换 obj.value.serviceattributelist 为原始对象：

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

转换后的原始对象与原始数组进行去重，并将其结果赋值回 ref 创建的数组对象中：

obj.serviceAttributeList = [...new Set(result)];

需要注意的是，直接使用 new set 无法对对象数组进行去重，需要将对象转换为字符串后再进行去重，然后转换回对象。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《Vue3 中使用 ref 创建数组，为什么去重后会出现 Proxy(Object) 数据？》文章吧，也可关注golang学习网公众号了解相关技术文章。