Vue3 ref 数据去重后出现 Proxy(Object) 的问题及解决方法
在 Vue3 开发中，使用 ref 创建的响应式数据，在进行数组去重操作后，有时会意外出现 Proxy(Object)，本文分析其原因并提供解决方案。
问题描述： 使用 ref 创建包含对象的数组，进行去重后，结果数组中除了去重后的数据，还包含一个 Proxy(Object) 元素。
问题根源： Vue3 使用 Proxy 实现响应式系统。ref 创建的对象会被 Proxy 包装，以便跟踪数据变化并触发更新。直接操作 ref 对象进行去重（例如使用 Set），可能会将 Proxy 对象本身添加到结果集中。
立即学习“前端免费学习笔记（深入）”；
解决方案： 需要将 ref 对象转换为其原始值。可以使用 toRaw 函数去除 Vue3 的响应式包装，确保去重操作只作用于原始数据。
以下代码示例展示了如何正确地对 ref 对象进行去重：
import { ref, toRaw } from 'vue';
const obj = ref({
serviceattributelist: [
{ name: 'duo' },
{ name: 'emma' },
{ name: 'duo' }, // 添加重复项进行测试
],
});
// 使用 toRaw 将 ref 对象转换为原始对象
const rawList = toRaw(obj.value.serviceattributelist);
// 使用 Set 进行去重，Set 本身只能对原始值进行去重，不能直接去重对象
const uniqueList = [...new Set(rawList.map(item => JSON.stringify(item)))].map(item => JSON.parse(item));
// 更新 ref 对象
obj.value.serviceattributelist = uniqueList;
console.log(obj.value.serviceattributelist);
这段代码首先使用 toRaw 获取 ref 对象的原始值，然后使用 JSON.stringify 将对象转换为字符串进行去重（因为 Set 对比的是对象的引用，而不是内容），最后再使用 JSON.parse 将字符串转换回对象。 这样就能避免 Proxy(Object) 的出现，并正确地对对象数组进行去重。 需要注意的是，这种方法适用于对象结构相对简单的场景。 对于复杂对象，可能需要根据具体情况调整去重逻辑。
通过使用 toRaw 函数和 JSON 字符串化/反序列化的方法，可以有效解决 Vue3 中 ref 数据去重后出现 Proxy(Object) 的问题，确保得到预期的去重结果。
