使用虚拟滚动时Vuetify v-autocomplete渲染性能优化求助

针对你遇到的虚拟滚动时v-autocomplete渲染慢导致空白的问题，给你几个可行的优化方向：

1. 延迟初始化v-autocomplete（懒加载） #

用轻量占位符替代初始状态的v-autocomplete，仅在用户交互时（比如点击该行的输入区域）才渲染真实组件。这样滚动时只有占位符快速渲染，不会出现空白。

示例代码：

<template v-for="item in visibleItems" :key="item.id">
  <div class="table-row">
    <!-- 占位符，样式匹配autocomplete，点击后切换为真实组件 -->
    <div 
      v-if="!item.showAutocomplete" 
      @click="item.showAutocomplete = true"
      class="autocomplete-placeholder"
    >
      {{ item.selectedLabel || '请选择' }}
    </div>
    <!-- 仅在需要时渲染v-autocomplete -->
    <v-autocomplete 
      v-else
      v-model="item.selectedValue"
      :items="item.options"
      label="选择项"
    />
    <!-- 其他列元素 -->
    <v-checkbox v-model="item.checked" />
    <span>{{ item.textCol1 }}</span>
    <span>{{ item.textCol2 }}</span>
  </div>
</template>

2. 预渲染视口外的组件 #

利用vue-virtual-scroller的preload属性，提前渲染视口上下各N行的组件，滚动时这些组件已经完成渲染，不会出现空白。

示例配置：

<virtual-scroller
  :items="tableData"
  :preload="3" <!-- 提前渲染视口外上下各3行 -->
  item-height="auto"
>
  <template v-slot="{ item }">
    <div class="table-row">
      <v-autocomplete
        v-model="item.selectedValue"
        :items="item.options"
        label="选择项"
      />
      <v-checkbox v-model="item.checked" />
      <span>{{ item.textCol1 }}</span>
    </div>
  </template>
</virtual-scroller>

注意：preload的值不要设太大，否则会抵消虚拟滚动的性能优势，建议3-5行即可。

3. 组件池化复用 #

创建固定数量的v-autocomplete组件池，滚动时只更新组件绑定的数据，而不是销毁重建组件。这种方式避免了频繁创建/销毁组件的开销，大幅提升滚动时的渲染速度。

简化实现示例：

<template>
  <virtual-scroller
    :items="tableData"
    item-height="auto"
    @update:visible-items="syncPoolData"
  >
    <template v-slot="{ item, index }">
      <div class="table-row">
        <!-- 从组件池中取对应位置的组件，复用DOM -->
        <v-autocomplete
          v-for="(poolItem, poolIdx) in autocompletePool"
          v-if="poolIdx === index % autocompletePool.length"
          v-model="poolItem.selectedValue"
          :items="poolItem.options"
          label="选择项"
        />
        <v-checkbox v-model="item.checked" />
        <span>{{ item.textCol1 }}</span>
      </div>
    </template>
  </virtual-scroller>
</template>

<script>
export default {
  data() {
    return {
      // 组件池大小设为视口能容纳的行数+2，这里暂设为10
      autocompletePool: new Array(10).fill().map(() => ({
        selectedValue: null,
        options: []
      }))
    }
  },
  methods: {
    syncPoolData(visibleItems) {
      visibleItems.forEach((item, idx) => {
        const targetPoolItem = this.autocompletePool[idx % this.autocompletePool.length]
        // 更新组件池数据
        targetPoolItem.selectedValue = item.selectedValue
        targetPoolItem.options = item.options
      })
    }
  }
}
</script>

4. 简化v-autocomplete的初始配置 #

关闭v-autocomplete的一些默认耗时特性，减少初始渲染的DOM节点数量：

• 用:lazy="true"让下拉菜单仅在用户点击时才渲染
• 关闭不必要的动画、预加载等

示例配置：

<v-autocomplete
  v-model="item.selectedValue"
  :items="item.options"
  label="选择项"
  :lazy="true"
  :menu-props="{ contentClass: 'overflow-y-auto', noAnimation: true }"
  no-data-text=""
/>

内容的提问来源于stack exchange，提问作者Andrew Rusinas