问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
汪
    352163

    image.png
    image.png
    vue3 为什么数组去重之后还会多一个 Proxy(Object)的数据？

    数组对象去重

    vue3数组去重javascript前端html5
    阅读 2.8k
    avatarAI BotBETA

    在 Vue 3 中，由于响应式系统的变化，当你使用 reactive 或 ref 来创建响应式数据时，Vue 会使用 Proxy 对象来包装原始数据，以便能够追踪其变化并触发相应的更新。

    当你对这样的响应式数组进行去重操作时，如果直接使用了某些去重方法（如 JavaScript 的 Set 对象），可能会出现你提到的 Proxy(Object) 数据。这是因为 Set 对象在处理响应式数组时，会将其视为普通对象，而不是深入处理其中的 Proxy 对象。

    为了解决这个问题，你需要在去重之前先将响应式数组转换为普通数组，然后再进行去重操作。以下是一个简单的示例，展示了如何在 Vue 3 中对响应式数组进行去重：

    import { reactive } from 'vue';

const originalArray = reactive([1, 2, 2, 3, 4, 4]);

// 转换为普通数组
const plainArray = [...originalArray];

// 使用 Set 对象进行去重
const uniqueArray = [...new Set(plainArray)];

console.log(uniqueArray); // [1, 2, 3, 4]

    在上面的示例中，我们首先使用 reactive 创建了一个响应式数组 originalArray。然后，我们使用扩展运算符 ... 将其转换为普通数组 plainArray。接下来，我们使用 Set 对象对 plainArray 进行去重，并将结果转换回数组 uniqueArray。最后，我们打印出 uniqueArray，可以看到它已经成功地进行了去重，并没有包含 Proxy(Object) 数据。

    请注意，在进行数组去重或其他操作时，务必确保你处理的是普通数组，而不是 Vue 的响应式数组，以避免出现意外的结果。

    1 个回答
    得票最新
    头像
    热饭班长
      3.7k20233347
      ✓ 已被采纳

      vue3的ref出来的数据，被特殊处理过。你的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
);
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题
      宣传栏