在Vue 3和TypeScript中过滤两个对象集合中不同的数据并返回成新对象

 

<script lang="ts" setup>
import { ref, computed } from 'vue';

interface MyData {
  id: number;
  name: string;
  age: number;
}

    const data1 = ref<MyData[]>([
      { id: 1, name: 'Alice', age: 25 },
      { id: 2, name: 'Bob', age: 30 },
      { id: 3, name: 'Charlie', age: 28 }
    ]);

    const data2 = ref<MyData[]>([
      { id: 1, name: 'Alice', age: 25 },
      { id: 3, name: 'Charlie', age: 28 },
      { id: 4, name: 'David', age: 35 }
    ]);

    const getDifferentData = (arr1: MyData[], arr2: MyData[]): MyData[] => {
      const map = new Map<number, MyData>();
      for (const item of arr1) {
        map.set(item.id, item);
      }
      for (const item of arr2) {
        if (map.has(item.id)) {
          map.delete(item.id);
        } else {
          map.set(item.id, item);
        }
      }
      return Array.from(map.values());
    };

    const differentData = computed(() => getDifferentData(data1.value, data2.value));

  
</script>

 

分别存储了两个对象集合。然后定义了一个getDifferentData函数，用于过滤出两个对象集合中不同的数据并返回成新对象。在这个函数中，我们使用了Map来进行数据的筛选和去重操作。

可以使用computed函数，数据结果的集合​​​​​​​differentData