vue3 数组去重

// 使用 Vue 3 和 JavaScript 实现数组去重

<template>
  <div>
    <p>原始数组: {{ originalArray }}</p>
    <p>去重后的数组: {{ uniqueArray }}</p>
  </div>
</template>

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

export default {
  setup() {
    // 定义一个原始数组
    const originalArray = ref([1, 2, 2, 3, 4, 4, 5]);

    // 使用 computed 属性来创建一个去重后的数组
    const uniqueArray = computed(() => {
      // 使用 Set 对象来去除数组中的重复元素
      return [...new Set(originalArray.value)];
    });

    return {
      originalArray,
      uniqueArray,
    };
  },
};
</script>

<style scoped>
/* 样式可以根据需要自定义 */
</style>

解释说明：

1. 模板部分 (<template>):

   • 显示原始数组和去重后的数组。

2. 脚本部分 (<script>):

   • 使用 ref 定义了一个响应式的原始数组 originalArray。
   • 使用 computed 计算属性来创建一个去重后的数组 uniqueArray。这里使用了 JavaScript 的 Set 对象，它会自动去除数组中的重复元素。
   • 返回 originalArray 和 uniqueArray，以便在模板中使用。

3. 样式部分 (<style scoped>):

   • 这里没有具体的样式，可以根据需要添加。

通过这种方式，你可以在 Vue 3 中轻松实现数组去重，并且保持代码的简洁和高效。