【前端】vue数组去重的3种方法

在Vue中，数组去重可以通过多种方式实现，以下是3种常见的方法：

1. 使用Array.prototype.filter方法和Array.prototype.indexOf方法。
2. 使用Array.prototype.reduce方法。
3. 使用Set对象。

方法1：filter + indexOf

methods: {
  uniqueByFilter(arr) {
    return arr.filter((item, index, self) => self.indexOf(item) === index);
  }
}

方法2：reduce

methods: {
  uniqueByReduce(arr) {
    return arr.reduce((accumulator, current) => {
      if (accumulator.indexOf(current) === -1) {
        accumulator.push(current);
      }
      return accumulator;
    }, []);
  }
}

方法3：Set

methods: {
  uniqueBySet(arr) {
    return [...new Set(arr)];
  }
}

在Vue组件中使用时，可以这样调用：

<template>
  <div>
    <p>原数组: {{ items }}</p>
    <p>去重后: {{ uniqueItems }}</p>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      items: [1, 2, 2, 3, 4, 4, 5]
    };
  },
  computed: {
    uniqueItems() {
      // 使用上面定义的任一去重方法
      return this.uniqueBySet(this.items);
    }
  }
};
</script>

以上代码展示了如何在Vue组件中定义计算属性来去重数组，并在模板中展示结果。