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

Question

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

数组对象去重

Answer 1

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);

Answer 2

在 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 的响应式数组，以避免出现意外的结果。