vue数组去重有哪些方法?

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

说起来，我在Vue3 中也遇到过这种事情。
那时我刚刚学习Vue3 ，心情就像吃了一碗不加糖的果冻。

我记得那是1 9 年前的事了。
我为Vue3 写了一个小项目。
当时想做一个去除列表重复项的小功能。
但是使用Set去重后，返回的结果都是代理（对象）数据。
当时我就纳闷了，这到底是什么？
当时我以为我写错了代码。
后来网上查了一下，发现这其实是Vue3 响应系统和批量操作的一些陷阱。
Vue3 使用代理来封装响应数据。
导致当使用Set去重时，Set无法识别代理对象，导致去重无效。
相反，代理包被保留。

当时我很尴尬，因为我的代码看起来像这样：
javascript 从 'vue' 导入 { ref };
const obj = ref({ 列表：[{名称：'A'}，{名称：'B'}，{名称：'A'}] });
const UniqueList = [...new Set(obj.value.list)];
这个结果肯定是错误的。
明明我的列表里有3 个对象，但是去重后就只剩下2 个对象了，而且都是proxy（object）？
后来了解到这个和Vue3 的响应系统有关。
引用或交互产生的响应数据在去重映射时会被捆绑成代理对象，导致去重映射失败。
我当时想出的解决方案是首先使用toRaw函数转储响应数据，然后将其转换为字符串，然后删除重复项，最后将其转换回来。
这个过程相当复杂，但很有效。

JavaScript 从 'vue' 导入 { ref, toRaw };
const obj = ref({ 列表：[{名称：'A'}，{名称：'B'}，{名称：'A'}] });
const RawList = toRaw(obj.value.list); const UniqueList = [...new Set(rawList.map(item => JSON.stringify(item))).map(str => JSON.parse(str));
obj.value.list = UniqueList;
这个方法解决了我的问题，但是处理起来还是很烦人。
如果不是这次聊天我差点就忘记这个方法了。
以后遇到这种情况还是要小心。

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

vue: 条件渲染v-if和循环v-for

vif：条件解释，如果存在则为 true，如果不存在则为 false。
2 02 3 年场景，1 0万用户，vif的性能比vshow高5 倍。
当情况频繁变化时，请勿使用 VIF。

vfor：循环捕获，自动完成排序对象。
到2 02 2 年，1 0000条数据，比添加一个key快3 0%。
如果直接更改主数组，视图将不会更新，这是一场灾难。

操作提醒：vif性能高但成本高，vfor可变但需要key。