vue.js - How to improve performance while using dynamic components in vue?

Question

Context:

Currently, I am working on a complex editor application which uses vuex state, vuetify's expansion panel and vue's dynamic component. Each dynamic component uses data which is accepted as props and has its own nested components.

Problem:

The issue with this approach is as the app deals with the large, nested state, the add operation in the UI slows down and makes the UI unusable.

Note:

In the example, I have added 1000 objects just to replicate the issue. Unfortunately cannot use pagination here.

Is there any other way to approach this problem to improve the performance, any suggestions would be helpful.

Issue:

Codesandbox - Demo

Codesandbox - Edit

question from:https://stackoverflow.com/questions/65916358/how-to-improve-performance-while-using-dynamic-components-in-vue

Answer 1

You are using index as your key and at the same time adding new item to the beginning of the array using unshift - which means every time the new item is added, all components needs to be rerendered. Use :key="item.name" instead and you will see huge speed improvement on adding new items...

Initial render is another problem - if the pagination is not an option, you can look at some virtual list solutions which do render only part of the list visible and make scrolling effective by reusing existing components. One example is vue-virtual-scroller. Vuetify itself has it's own implementation but I'm not sure how well it will work with expansion panel considering this note in the documentation:

We are in the process of integrating the v-virtual-scroll component into existing features and components. If you are interested in helping, please reach out to John Leider in the Discord Community.

(Also it seems you are using really old version of Vuetify...)