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) 数据？的详细内容，更多请关注其它相关文章！