Vue3 数组去重后多出 Proxy(Object) 数据的原因?

作者站长头像
站长
· 阅读数 14

Vue3 数组去重后多出 Proxy(Object) 数据的原因?Vue3 数组去重后多出 Proxy(Object) 数据的原因?vue3 为什么数组去重之后还会多一个 Proxy(Object)的数据?

数组对象去重

回复
1个回答
avatar
test
2024-06-20

vue3ref出来的数据,被特殊处理过。你的addServiceObject是不是ref出来的?

如果是,使用的时候调用一下toRaw

示例:

import { ref, toRaw } from 'vue';

const obj = ref({
  serviceAttributeList: [
    {
      name: 'Duo',
    },
    {
      name: 'Emma',
    },
  ],
});

const list = [
  {
    name: 'Duo',
  },
  {
    name: 'Emma',
  },
];

const set = new Set([...list, ...toRaw(obj.value.serviceAttributeList)]);
const result = Array.from(set);
obj.serviceAttributeList = [...new Set(result)];
console.log(obj.serviceAttributeList);

另外,new Set默认无法帮助对象数组去重,如果你非要,则需要事先将对象转换为字符串才行。

obj.serviceAttributeList = [...new Set(result.map(JSON.stringify))].map(
  JSON.parse
);
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容