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

Making a "real" pagination that send package of data 100 rows by 100 to your VExpansinPanel component ? — Foxlab
– Foxlab, Commented Jan 27, 2021 at 10:21

Michal Levý · Accepted Answer · 2021-01-27 10:46:34Z

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...)

edited Jan 27, 2021 at 10:46

answered Jan 27, 2021 at 10:23

Michal Levý

38.6k8 gold badges82 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

A.D Over a year ago

Thanks that helped,Additonally i was maintaining a key on expansion-panel to make it force render to bypass this issue here github.com/vuetifyjs/vuetify/issues/11225

Collectives™ on Stack Overflow

How to improve performance while using dynamic components in vue?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related