vue.js 根据唯一标识获取两个数组对象相同和不同数据

Vue.js 是一个流行的前端框架，主要用于构建用户界面。如果你想根据某个唯一标识符（通常称为 `key` 或 `id`）从两个数组对象中获取相同和不同数据，可以借助 Vue 的计算属性和数组方法来实现。下面是一个简单的步骤说明：

1. **创建计算属性**: 首先，在 Vue 实例中创建一个计算属性，接收两个数组作为参数。

data() {
  return {
    array1: [
      { id: 'A', name: 'Alice' },
      // ...其他对象
    ],
    array2: [
      { id: 'B', name: 'Bob' },
      // ...其他对象
    ],
    sameAndDifferentData: {}, // 存储结果的对象
  };
},
computed: {
  compareArrays() {
    const result = {
      same: [],
      different: [],
    };

    this.array1.forEach(obj1 => {
      const obj2 = this.array2.find(obj2 => obj2.id === obj1.id);
      
      if (obj2) {
        result.same.push({ ...obj1, isSame: true });
      } else {
        result.different.push({ ...obj1, isSame: false });
      }
    });

    return result;
  }
}

2. **处理相同和不同**:
- 如果在第二个数组中找到了匹配的项，那么它被视为相同的，并添加到 `result.same` 数组中，同时设置 `isSame` 属性为 `true`。
- 如果未找到匹配项，则认为它是不同的，并添加到 `result.different` 数组中，`isSame` 设置为 `false`。

3. **访问数据**:
可以通过 `this.compareArrays` 访问这两个数组的结果，它们分别包含了根据标识符相同和不同的数据对象。例如:

console.log(this.compareArrays); // 看到相同和不同的数据