时间戳

首页 > 解决方案 > v-combobox - 具有自定义项目外观的大型列表上的性能问题

vue.js - v-combobox - 具有自定义项目外观的大型列表上的性能问题

问题描述

我有一个 v-combobox，通过项目插槽为项目列表提供自定义外观。

  <v-combobox :items="items"...>
    <template v-slot:item="{ item }">
      <mycustomcostlycomp :item ="item"/>
    </template>
  </v-combobox>

我的问题是，当我在组合框中键入时，列表会被过滤，并且列表中的每个项目都将被重新渲染——对于我正在使用的自定义组件来说，这是一项代价高昂的操作。我怎样才能避免它重新渲染？每个项目都已被渲染，应该只是根据我输入的内容隐藏其中的一些项目。

除了性能问题外，它按预期工作。

编辑：codepen= https://codepen.io/olivierkrener/pen/MWKebOv

我添加了 2 个计数器，一个用于每个值的安装次数，一个用于组件内值更改的次数。当您在框中键入时，即使数据都是静态的，您也会看到两者都在增加。如何避免重新渲染组件？为什么价值观会发生变化？

在我的应用程序中，组件首次渲染和值更改（通过手表）都会导致一些昂贵的处理。

EDIT2：我按照建议添加了一个关键道具，并且不再触发观察者:)。但是组件仍然一次又一次地渲染，

标签： vue.jsvuetify.js

解决方案

推荐阅读