Javascript vue js大型阵列到表性能建议

我正在构建一个在HTML表中显示数据的内部应用程序。API返回给我一个最多20K个对象的数组，这些对象存储在data（）中，表中的每个单元格都会调用一个方法来查找正确的对象。该对象通过一个由三部分组成的键定位（2部分用于行，1部分用于列）。在我的笔记本电脑（i7 7thGen和8GB ram）上的初始渲染性能对于初始渲染来说是可以接受的[大约1分钟]（它正在替换的excel应用程序几乎需要3分钟），但是对单个单元格（数组中的对象）的更新会触发更改检测，更新需要另一分钟。有时，用户需要更新单个单元格，有时需要更新行，有时需要在单个列的所有行（或某些选定行）上传播更改。是否有建议的绩效提升策略。我正在考虑用列对象集合（1部分键）重新构造返回到每行对象（2部分键）中的数据。这意味着方法调用只需迭代2500个“行”对象，然后迭代8个“列”对象，从逻辑上看，它应该更快，但现在会消耗更多内存。我需要能够识别哪些对象在表单元级别发生了更改，因为我需要将更改写回数据库。我应该放弃原始API结果并在保存时重新添加水合物，还是可以选择使用Object.freeze来防止原始阵列上的反应，并将更改写入一个单独的阵列，如果存在记录，则该阵列优先

[
  {
     key1:value,
     key2:value,
     key3:valueA,
     displayValue:value
  },
  {
     key1:value,
     key2:value,
     key3:valueB,
     displayValue:value2
  },
  {
     key1:value,
     key2:value,
     key3:valueC,
     displayValue:value3
  }...
  {
     key1:value2,
     key2:value2,
     key3:valueA,
     displayValue:value
  },
  {
     key1:value2,
     key2:value2,
     key3:valueB,
     displayValue:value2
  },
  {
     key1:value2,
     key2:value2,
     key3:valueC,
     displayValue:value3
  }...
]

变成

[
 {
   key1:value,
   key2:value,
   key3collection:[
     {key3:valueA, displayvalue:value},
     {key3:valueB, displayvalue:value2},
     {key3:valueC, displayvalue:value3}
   ]
 },
 {
   key1:value2,
   key2:value2,
   key3collection:[
     {key3:valueA, displayvalue:value},
     {key3:valueB, displayvalue:value2},
     {key3:valueC, displayvalue:value3}
   ]
 },
]

---

我要做的是将API响应（如果您控制API或在客户端，则直接在服务器上）转换为如下内容：

{
  columns: ['ValueA', 'ValueB', 'ValueC']  // same for every row, right ?
  rows: [
    {
      key1:value,
      key2:value,
      values:[ 'value', 'value2', 'value3' ]
    }, {
      key1:value2,
      key2:value2,
      values:[ 'value', 'value2', 'value3' ]
    }, ....
]

我假设每一行都有相同的列集，那么为什么要在数据中保留重复性呢

这样，您就可以通过以下模板（伪代码）呈现表格，而无需任何额外的数据查找：

{{column}}
{{rowItem}}

---

对于更改跟踪（以便稍后将其发送回API），只需在

值旁边添加简单数组，如
isDirty:[fasle，false，false]
，并在每次更新某些单元格时将其更改为
true
。发布时，只需迭代数据结构，并以API期望的格式重新创建更新的对象……
“表由调用方法以查找正确对象的每个单元格填充”…这听起来很昂贵。您肯定应该将API结果转换为可以迭代的内容。您的“保存”API是什么样子的？可以是由用户更改的键（1/2/3），也可以仅更改
displayvalue
？最佳做法是规范化数据，这样就不需要查找来创建关系视图，所以这就是您想要开始的地方。看看LinusBorg（Vue领导者）在这个论坛帖子上的回复：数据结构绝对是个问题。但在我看来，他在做查找，甚至是渲染，这听起来很糟糕。也许给我们看看组件本身的重要部分？谢谢各位。我有RDBMS的背景，所以我是在表格而不是文档中思考的。看着Linusborg的帖子，我想我在概念上已经差不多做到了。它需要是具有{}类型的未知属性的{}，而不是{}的[]。我无法使用vuex或webpack，需要保持代码可读性。您认为在中间件（PHP）中进行转换更有意义吗。我正在使用MSSQLS2012，因此我甚至可以对XML进行转换，然后将PHP或js转换为json。想法？那么你问题中的每个对象实际上是某个MS SQL表中单行的表示吗？我有一个列数组来进行列迭代，但格式更复杂，因为它实际上是一个市场数组，每个市场都有一个价目表数组。不幸的是，values数组是一个对象数组，而不是原语数组。尽管在99.9%的情况下，我会为每一列提供一个对象，但我不能保证它，也不能信任API（防御性编程…）的数据顺序。更改跟踪数组有何帮助？Vue仍将尝试渲染整个表。不过，我需要跟踪更新API的脏记录。更改跟踪正是为了实现这一点，所以您知道哪个单元格已更改，需要将其发回服务器。Vue将始终呈现整个表（到虚拟DOM）。这就是为什么对数据进行迭代总是比在每个单元格的巨大数组中查找正确的对象快得多的原因……这是个离题的话题，但有没有一种方法可以“暂停”更改跟踪。例如，如果需要更改行[]数组中的每个元素的值[3 ][A].AcvvId日期（或者行{}对象中的每个属性），那么在ReaveReaveSurvivE永远不会触发在代码中间工作的重新渲染之前，完成所有数据更新是有意义的。代码>不幸的是，值数组是一个对象数组，而不是基元数组

-一点问题都没有，只需将一个对象替换为基元值即可

在99.9%的情况下，我无法保证每列都有一个对象

-没问题，只需将

null

放在那里，并在渲染时处理该情况<代码>我不能信任API中数据的顺序-好的，然后排序。关键是，在收到数据后只需执行一次所有这些操作，这样渲染就可以进行迭代。。。