Vue中AG Grid的applyTransaction()数据更新不一致问题咨询

问题根源 #

AG Grid的applyTransaction依赖对象引用来匹配RowNode，加上Vue响应式代理的特性，当操作时引用不一致、直接修改RowNode.data或者AG Grid缓存机制干扰时，就会出现数据源和RowNode.data不同步的情况。

具体解决步骤 #

• 始终基于原数据源对象进行更新
  不要创建新对象来传递给update数组，直接修改数据源中的目标对象，再将其传入applyTransaction。AG Grid会通过引用找到对应的RowNode，确保两边同步：

  // 找到数据源中要更新的原对象
  const target = this.gridData.find(item => item.id === targetId);
  // 修改原对象的属性
  target.status = '已完成';
  // 执行更新事务
  this.gridApi.applyTransaction({ update: [target] });
  

• 强制刷新单元格消除缓存
  若AG Grid的行缓存导致数据残留，在事务执行后调用refreshCells强制刷新：

  this.gridApi.applyTransaction({ update: [updatedItem] });
  // force: true 强制忽略缓存刷新
  this.gridApi.refreshCells({ force: true });
  

• 禁止手动修改RowNode.data
  所有数据变更都通过applyTransaction或setRowData完成，不要直接操作rowNode.data——AG Grid内部维护RowNode状态，手动修改会打破同步逻辑。

• 处理Vue响应式代理对象
  如果数据源是reactive包裹的响应式对象，用toRaw转成普通对象再传给AG Grid，避免代理对象导致的内部处理异常：

  import { toRaw } from 'vue';
  const rawTarget = toRaw(targetItem);
  rawTarget.name = '更新后的名称';
  this.gridApi.applyTransaction({ update: [rawTarget] });
  

• 保持数据源引用稳定
  初始化后不要替换整个数据源数组的引用（比如this.gridData = newArray），如果需要批量更新，用setRowData方法：

  // 批量更新时用setRowData确保同步
  this.gridApi.setRowData(newDataArray);
  

内容的提问来源于stack exchange，提问作者Gusde Widnyana