I’m displaying a hierachical psuedo-table - with drill down. The raw data is at the lowest level of the hierarchy. The parent levels are calculated using filters and reduce.
This works fine for 500 rows of data - but we have a user who has 3000 rows of data and the lag between exanding a level of the screen updating is about 6 seconds.
Things I’ve done - the object storing the data is frozen.
Here’s a mock-up of the page (display) and object (data) structure
Each of the aggregate values is being re-calculated with each expand or collapse.
What strategies can I employ with this to improve performance? Can I cache previous results?
Does vue create new objects when methods filter and these are reactive?
Is reduce worse than a simple for-in?