上下文：
目前，我正在开发一个复杂的编辑器应用程序，它使用 vuex 状态、vuetify 的扩展面板和 vue 的动态组件。每个动态组件都使用作为 props 接受的数据，并有自己的嵌套组件。
问题：
这种方法的问题在于，当应用处理大型嵌套状态时，UI 中的添加操作会变慢并使 UI 无法使用。
注意：
在示例中，我添加了 1000 个对象只是为了重现该问题。很遗憾，这里不能使用分页。
是否有其他方法可以解决此问题以提高性能，任何建议都会有所帮助。
问题：
答案 0 :(得分：1)
您使用 index 作为您的 key，同时使用 unshift 将新项目添加到数组的开头 - 这意味着每次添加新项目时，所有组件需要重新渲染。改用 :key="item.name"，您会看到添加新项目的速度大大提高...
初始渲染是另一个问题 - 如果分页不是一个选项，您可以查看一些虚拟列表解决方案，这些解决方案仅渲染列表的一部分可见，并通过重用现有组件使滚动有效。一个例子是vue-virtual-scroller。 Vuetify 本身具有 own implementation，但考虑到文档中的此注释，我不确定它与扩展面板的配合效果如何：
<块引用>我们正在将 v-virtual-scroll 组件集成到现有功能和组件中。如果您有兴趣提供帮助，请联系 Discord 社区的 John Leider。
（而且您似乎使用的是非常旧版本的 Vuetify...）