Vue3数组去重方法总结

在 Vue 3 中对数组去重，本质上是 JavaScript 数组操作问题。以下是几种常用方法，结合 Vue 3 的响应式特性实现数据更新：

方法 1：使用 Set（推荐）

javascript

import { ref } from 'vue';

const list = ref([1, 2, 2, 3, 3, 3]);

// 去重逻辑
const deduplicate = () => {
  list.value = [...new Set(list.value)];
  
  // 或使用 Array.from
  // list.value = Array.from(new Set(list.value));
};

方法 2：使用 filter

javascript

const deduplicate = () => {
  list.value = list.value.filter(
    (item, index) => list.value.indexOf(item) === index
  );
};

方法 3：使用 reduce

javascript

const deduplicate = () => {
  list.value = list.value.reduce(
    (unique, item) => unique.includes(item) ? unique : [...unique, item],
    []
  );
};

完整组件示例

vue

<template>
  <div>
    <button @click="deduplicate">去重</button>
    <ul>
      <li v-for="(item, index) in list" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

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

const list = ref(['apple', 'banana', 'apple', 'orange', 'banana']);

const deduplicate = () => {
  // 任选一种去重方法
  list.value = [...new Set(list.value)];
};
</script>

对象数组去重（根据特定属性）

javascript

const users = ref([
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 1, name: 'Alice' } // 重复项
]);

const deduplicateObjects = () => {
  const seen = new Map();
  users.value = users.value.filter(item => {
    return !seen.has(item.id) && seen.set(item.id, true);
  });
};

注意事项：

1. 响应式更新：直接赋值新数组 (list.value = [...]) 才能触发视图更新

2. 性能考虑：大数组推荐使用 Set 或 Map，时间复杂度 O(n)

3. 对象数组：需根据唯一标识（如 id）去重

4. 原始数组保护：如果需保留原数组，操作前可深拷贝：

   js

   const newList = [...new Set(originalArray)];

响应式原理说明：

Vue 3 使用 Proxy 实现响应式，直接修改数组元素 (list.value[0] = ...) 或使用 push() 等方法可触发更新，但去重操作需要生成新数组并整体替换才能确保视图正确更新。

选择方法时，简单数组用 Set 最简洁，对象数组推荐用 Map 实现高效去重。