Angular中如何实现类似EF Core的对象属性变更追踪功能

现有成熟方案 #

Angular生态内不需要从零实现类似EF的实体变更追踪能力，已有多套成熟可选方案：

• Angular内置差异检测工具：框架自带IterableDiffer和KeyValueDiffer，是Angular自身实现*ngFor、属性绑定变更检测的底层工具，无需引入第三方依赖即可使用。其中IterableDiffer负责追踪数组级别的增删改动，KeyValueDiffer负责追踪单个对象的属性变更，支持获取修改前后的值、标记变更条目，性能优于手动全量对比。
• 状态管理库内置能力：如果项目已经接入NgRx、Akita、NgXs这类状态管理库，可直接使用库自带的实体脏检查能力。例如Akita的EntityStore原生支持获取修改实体集合、判断全局是否存在未保存变更，不需要额外封装。
• 轻量通用工具：如果不想引入重型依赖，可使用immer、deep-object-diff这类通用工具库，基于快照或Proxy能力实现差异对比，几行代码即可封装出符合需求的API，打包体积影响极小。

轻量无依赖实现参考 #

如果项目场景简单，不需要复杂的追踪能力，可以直接基于原始快照对比实现，完全匹配你期望的调用方式：

class TrackableList<T extends Record<string, any>> {
  private originalSnapshot: T[] = [];
  value: T[] = [];

  constructor(initialList: T[]) {
    // 深拷贝初始化基准快照，避免引用篡改
    this.originalSnapshot = structuredClone(initialList);
    this.value = structuredClone(initialList);
  }

  get hasChanges(): boolean {
    return JSON.stringify(this.originalSnapshot) !== JSON.stringify(this.value);
  }

  detachChange() {
    const modified: T[] = [];
    const added: T[] = [];
    const deleted: T[] = [];

    // 识别新增、修改项
    this.value.forEach((currentItem) => {
      const matchOriginal = this.originalSnapshot.find(
        item => JSON.stringify(item) === JSON.stringify(currentItem)
      );
      if (!matchOriginal) {
        // 区分是新增还是修改：如果原始列表有同标识（比如id）的项但值不同就是修改，否则是新增
        const hasSameId = this.originalSnapshot.some(
          item => item.id === currentItem.id
        );
        hasSameId ? modified.push(currentItem) : added.push(currentItem);
      }
    });

    // 识别删除项
    this.originalSnapshot.forEach(originalItem => {
      const exist = this.value.some(
        item => JSON.stringify(item) === JSON.stringify(originalItem)
      );
      if (!exist) deleted.push(originalItem);
    });

    return { modified, added, deleted };
  }

  // 保存成功后调用，更新基准快照
  acceptChanges() {
    this.originalSnapshot = structuredClone(this.value);
  }
}

使用方式和你预期完全一致：

// 初始化基准列表
const trackableList = new TrackableList<Person>([
  {name: 'John', age: 23},
  {name: 'Elen', age: 45}
]);

// 修改属性
trackableList.value[1].age = 35;
console.log(trackableList.hasChanges); // 输出true
const changes = trackableList.detachChange();
// changes.modified 即为修改后的Elen条目
// 保存成功后调用acceptChanges，重置基准状态
trackableList.acceptChanges();
console.log(trackableList.hasChanges); // 输出false

注意：如果对象包含Date、正则、函数等JSON序列化不支持的类型，把示例中的JSON.stringify对比、structuredClone替换为lodash的cloneDeep和isEqual即可，兼容性更好。

业务场景优化建议 #

针对你提到的列表行高亮、保存按钮联动的场景，可以做几个针对性优化：

• 长列表场景下不要每次全量对比所有条目，给每个行项单独做值对比，配合Angular的trackBy函数，只在对应行的值发生变化时触发样式更新，避免不必要的渲染。
• 把hasChanges状态包装为Angular信号或者RxJS可观察对象，所有对列表的修改操作自动触发状态更新，保存按钮的禁用状态直接绑定这个响应式值即可，不需要手动触发检查。
• 不要手动维护行项的“已修改”标记位，所有变更判断都实时和原始快照做对比，自然支持“值改回原始状态就自动取消变更标记”的逻辑，和EF的变更追踪行为完全一致。
• 如果列表是通过Angular响应式表单的FormArray实现，直接使用表单控件自带的dirty、pristine状态即可，不需要额外写对比逻辑，表单原生就支持判断控件是否被修改、重置为初始值的能力。

内容的提问来源于stack exchange，提问作者G.D.