在vue中使用动态组件时如何提高性能? [英] How to improve performance while using dynamic components in vue?

问题描述

上下文:

目前，我正在开发一个复杂的编辑器应用程序，它使用 vuex 状态、vuetify 的扩展面板和 vue 的动态组件.每个动态组件都使用作为 props 接受的数据，并有自己的嵌套组件.

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.

问题:

这种方法的问题在于，当应用处理大型嵌套状态时，UI 中的添加操作会变慢并使 UI 无法使用.

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.

注意:

在示例中，我添加了 1000 个对象只是为了重现该问题.很遗憾，这里不能使用分页.

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.

问题:

Codesandbox - 演示

Codesandbox - 编辑

推荐答案

您正在使用 index 作为您的 key 并同时在开头添加新项目使用 unshift 的数组 - 这意味着每次添加新项目时，所有组件都需要重新渲染.改用 :key=item.name"，你会看到添加新项目的速度有巨大的提升...

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

初始渲染是另一个问题 - 如果分页不是一个选项，您可以查看一些虚拟列表解决方案，这些解决方案仅渲染列表的一部分可见，并通过重用现有组件使滚动有效.一个例子是 vue-virtual-scroller.Vuetify 本身有它的自己的实现，但我不确定它的效果如何使用扩展面板考虑文档中的此注释:

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:

我们正在将 v-virtual-scroll 组件集成到现有功能和组件中.如果您有兴趣提供帮助，请联系 Discord 社区的 John Leider.

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.

(此外，您似乎使用的是非常旧版本的 Vuetify...)

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

这篇关于在vue中使用动态组件时如何提高性能?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！