使用 Vue3 中的 Map 对返回结果去重

在 Vue3 中，你可以使用 Map 对从后端返回的数组结果进行去重。假设你有一个数组，其中包含多个对象，每个对象都有一个唯一的 id 属性。以下是一个示例，展示如何使用 Map 去重：

<script setup>
import { ref, onMounted } from 'vue';

const uniqueResults = ref([]);

onMounted(() => {
  const data = [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' },
    { id: 1, name: 'Alice' },
    { id: 3, name: 'Charlie' },
    { id: 2, name: 'Bob' }
  ];

  // 使用Map根据id去重
  const map = new Map();
  data.forEach(item => {
    if (!map.has(item.id)) {
      map.set(item.id, item);
    }
  });

  // 将Map转换为数组
  uniqueResults.value = Array.from(map.values());
});

</script>

<template>
  <div>
    <h2>去重后的结果:</h2>
    <ul>
      <li v-for="item in uniqueResults" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

在这个例子中：

1. 我们定义了一个 data 数组，包含多个可能重复的对象。
2. 使用 Map 根据 id 属性去重。Map 的键是对象的 id，值是对应的对象。
3. 最后将 Map 的值转换为数组，并将去重后的结果存储在 uniqueResults 中。

在模板部分，v-for 循环遍历 uniqueResults，并显示去重后的结果。