Vue3中ref数组去重导致Proxy(Object)问题的解决方案
在Vue3项目中，使用ref创建的响应式数组进行去重操作时，可能会遇到去重后数组中出现Proxy(Object)的问题。本文将深入分析此问题的原因并提供有效的解决方法。
问题描述： 使用ref定义的数组对象进行去重，结果数组中意外出现Proxy(Object)。这通常发生在将ref对象与其他数组合并后进行去重。
根本原因： Vue3的ref机制会对数据进行代理，以实现响应式更新。直接使用ref对象参与数组去重时，Set对象会将ref代理对象本身视为独立元素，而非处理其内部数组数据，导致去重后保留Proxy(Object)代理对象。
立即学习“前端免费学习笔记（深入）”；
创建 Flask + Vue.js 全栈项目，采用单端口架构、uv 依赖管理、结构化日志和生产级前端设计。当用户要求以下操作时触发：创建新的 Flask+Vue 项目、搭建 Web 应用、构建全栈 Python+Vue 应用、初始化 Flask Web 项目、设置单端口 Flask 前后端项目。触发词：新建项目、创建项目、搭建项目、Flask项目、Vue项目。
解决方案： 为了避免这个问题，我们需要将ref对象转换为原始数据。可以使用toRaw函数剥离Vue3的响应式代理，从而操作原始数据。
以下代码片段演示如何使用toRaw解决此问题：
import { ref, toRaw } from 'vue';
const obj = ref({
serviceattributelist: [
{ name: 'duo' },
{ name: 'emma' },
],
});
const list = [
{ name: 'duo' },
{ name: 'emma' },
];
// 使用toRaw转换ref对象为原始数组
const uniqueList = [...new Set([...list, ...toRaw(obj.value.serviceattributelist)].map(item => JSON.stringify(item)))].map(item => JSON.parse(item));
obj.serviceattributelist = uniqueList;
console.log(obj.serviceattributelist);
这段代码中，我们使用toRaw(obj.value.serviceattributelist)将ref对象转换为原始数组，然后利用JSON.stringify和JSON.parse对对象数组进行去重，最终避免了Proxy(Object)的出现。 直接使用new Set对对象数组去重会比较对象的引用，而不是内容，因此需要此转换。
通过以上方法，可以有效解决Vue3中ref数组去重导致Proxy(Object)的问题，确保数据处理的正确性。
