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. 性能考虑 :大数组推荐使用 SetMap,时间复杂度 O(n)

  3. 对象数组:需根据唯一标识(如 id)去重

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

    js

    复制代码
    const newList = [...new Set(originalArray)];

响应式原理说明:

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

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

相关推荐
北城以北88887 小时前
Vue--Vue基础(二)
前端·javascript·vue.js
ObjectX前端实验室7 小时前
【react18原理探究实践】更新调度的完整流程
前端·react.js
tanxiaomi9 小时前
通过HTML演示JVM的垃圾回收-新生代与老年代
前端·jvm·html
palpitation979 小时前
Android App Links 配置
前端
FuckPatience9 小时前
Vue 组件定义模板,集合v-for生成界面
前端·javascript·vue.js
sophie旭9 小时前
一道面试题,开始性能优化之旅(3)-- DNS查询+TCP(三)
前端·面试·性能优化
开心不就得了9 小时前
构建工具webpack
前端·webpack·rust
gerrgwg9 小时前
Flutter中实现Hero Page Route效果
前端
不枯石9 小时前
Matlab通过GUI实现点云的ICP配准
linux·前端·图像处理·计算机视觉·matlab
hhzz9 小时前
Pythoner 的Flask项目实践-在web页面实现矢量数据转换工具集功能(附源码)
前端·python·flask