title: vue js large array to table performance advice
body: <p>I am building an internal app that displays data in an HTML table.  The API returns me an array of up to 20K objects which are stored in data() and the table is populated by each cell calling a method to find the correct object.  The object is located via a 3-part key (2 for the row and 1 for the column).  Initial rendering performance on my laptop (i7 7thGen and 8GB ram) is acceptable [about 1 minute] for initial render (excel app it is replacing takes almost 3), however an update to a single cell (object in the array) triggers the change detection and an update takes another minute.  Sometimes the user will want to update a single cell, sometimes a row and sometimes propagate a change on all rows(or some selected rows) for a single column.  Is there a recommended strategy for performance enhancement.  I was thinking of restructuring the data that comes back into an object per row (2-part key) with a collection of objects for the column (1-part key).  This would mean that the method call will only have to iterate over 2500 'row' objects and then over 8 'column' objects which feels logically like it should be faster but will now consume more memory. I need to be able to identify which objects have changed at a table cell level as I need to write the changes back to the database.  Should I discard the original API results and re-hydrate on save or would an option be to use Object.freeze to prevent reactivity on the original array and write changes to a separate array which then takes precedence if a record exists.</p>
  
  <pre><code>[
    {
       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
    }...
  ]
  </code></pre>
  
  <p>becomes</p>
  
  <pre><code>[
   {
     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}
     ]
   },
  ]
  </code></pre>