Vue3中ref数组去重后出现Proxy(Object)是什么原因？-js教程-PHP中文网

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

霞舞

发布： 2025-03-01 21:46:09

原创

644人浏览过

vue3中ref数组去重后出现proxy(object)是什么原因？

Vue3中使用ref修饰的数组对象去重后出现Proxy(object)的解决方法

在Vue3项目开发中，对用ref修饰的数组对象进行去重操作（例如使用Set）时，有时会遇到结果中出现Proxy(object)的情况。本文分析原因并提供解决方案。

问题： ref修饰的数组对象去重后，Set或其他去重方法会将ref生成的代理对象本身也视为一个独立元素，导致结果包含Proxy(object)。

原因： ref在Vue3中返回的是一个代理对象，而非原始数据。Vue3追踪这些代理对象以实现响应式更新。直接将ref对象传入Set，Set会将代理对象作为独立元素处理。

立即学习“前端免费学习笔记（深入）”；

解决方案： 使用toRaw函数将ref对象的代理对象转换为原始JavaScript对象。在去重之前，先用toRaw处理，再进行去重操作。

示例代码： 假设addserviceobject是一个用ref修饰的对象，包含serviceattributelist数组。

import { ref, toRaw } from 'vue';

const obj = ref({
  serviceattributelist: [
    { name: 'duo' },
    { name: 'emma' },
    { name: 'duo' } // 重复元素
  ],
});

// 使用toRaw获取原始数据
const rawList = toRaw(obj.value.serviceattributelist);

// 使用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获取serviceattributelist的原始数据，然后使用JSON.stringify将对象转换为字符串进行去重，最后用JSON.parse转换回对象数组，并更新ref对象。这确保了去重操作只作用于对象的值，避免了Proxy(object)的出现。

通过以上方法，可以有效避免Vue3中ref数组对象去重时出现Proxy(object)的问题，确保程序的正确运行。记住，Set本身不能直接对对象数组去重，需要先将对象转换为可比较的类型（如字符串）。

以上就是Vue3中ref数组去重后出现Proxy(Object)是什么原因？的详细内容，更多请关注php中文网其它相关文章！