How Can I Repeatedly Access A Vue Prop Without Tanking Performance?

I'm working on a Vue/Vuetify app that has a performance problem. I've created a custom component that wraps around a standard Vuetify v-data-table component. It works fine for smal

Solution 1:

The performance problem is actually a symptom of your loop code rather than Vue. The most expensive data access is in your inner loop in dataForDataTable():

for (i...) {
  for (j...) {
    theValues[0].data[i][j]  // ~50 ms average (expensive)
  }
}

// => long hang for 32K items

An optimization would be to cache the array outside your loop, which dramatically improves the loop execution time and resolves the hang:

const myData = theValues[0].datafor (i...) {
  for (j...) {
    myData[i][j]  // ~0.00145 ms average
  }
}

// => ~39 ms for 32K items

demo 1

Note the same result can be computed without loops, using JavaScript APIs. This affords readability and reduced lines of code at a slight performance cost (~1ms). Specifically, use Array.prototype.map to map each value from data to an object property, obtained by Array.prototype.reduce on theKeys:

theValues[0].data
  .map(values => theKeys.reduce((obj,key,i) => {
    obj[key] = values[i]
    return obj
  }, {}))

// => ~40 ms for 32K items

demo 2

Times above measured on 2016 MacBook Pro - 2.7GHz i7, Chrome 87. Codesandbox demos might show a vast variance from the above.

Solution 2:

Tip 1

Original text:

Accessing the prop (data) should not be an issue. Yes, data are reactive but reading it should be very efficient (Vue is just "making notes" that you are using that data for rendering)

Well it seems I was clearly wrong here...

Your component is getting data by prop but it is very probable that the data is reactive in parent component (coming from Vuex or stored in parent's data). Problem with Vue 2 reactivity system is it is based on Object.defineProperty and this system does not allow to intercept indexed array access (Vue is not able to detect code like arr[1] as an template dependency). To workaround this, if object property (theValues[0].data in your code) is accessed, it checks whether the value is array and if yes it iterates the whole array (plus all nested arrays)to mark the items as dependencies - you can read more in depth explanation here

One solution to this problem is to create local variable let data = theValues[0].data as tony19 suggests. Now the .data Vue getter is not called every time and the performance is fixed...

But if your data is immutable (never change), just use Object.freeze() and Vue will not try to detect changes of such data. This will not only make your code faster but also saves a ton of memory in case of large lists of objects

Note that this problem is fixed in Vue 3 as it uses very different reactivity system based on ES6 proxies...

Tip 2

Although Vue computed properties are highly optimized, there is still some code running every time you access the property (checking whether underlying data is dirty and computed prop needs reevaluate) and this work adds up if you use it in a tight loop as in your case... Try to make local copy of the theKeyscomputed prop before executing the loop (shallow copy is enough, no need for a deep copy)

See this really good video from Vue core member

Of course the same issue applies to accessing the dataForDataTable computed prop from the template. I encourage You to try to use watcher instead of computed to implement same logic as dataForDataTable and store it's result in data to see if it makes any difference...