Reka UI logoReka
backdrop
示例
指南

虚拟化

了解如何使用 Reka UI 高效渲染大型数据集，该 UI 由 @tanstack/vue-virtual 提供支持。

什么是虚拟化？

虚拟化是一种技术，通过仅渲染视口中当前可见的项目来高效渲染大型列表或树结构。这种方法显著提高了性能并减少了内存使用，尤其是在处理数千个项目时。

使用虚拟化的好处

  • 性能提升：渲染数千个项目而无延迟
  • 内存使用减少：仅为可见项目挂载 DOM 节点
  • 更好的用户体验：更快的初始加载时间和响应式交互

自定义选项

所有虚拟化（组合框、列表框和树形图）组件提供以下属性和自定义选项

  • 自定义项目渲染：灵活渲染复杂的项目结构
  • estimateSize：为静态或动态项目设置预估项目高度
  • overscan：控制在可见区域之外渲染的项目数量
  • textContent：每个项目的文本内容，以实现预输入（type-ahead）功能

用法

以下是一些确保虚拟化正常运行的重要注意事项！

  1. 一个具有固定高度/最大高度的包装 <Virtualizer />。
  2. 一致的项目高度，并适当设置 estimateSize 属性。
  3. 设置 textContent 属性以确保预输入（type-ahead）可访问性。

示例

vue
<script setup>
import { ComboboxContent, ComboboxItem, ComboboxRoot, ComboboxViewport, ComboboxVirtualizer } from 'reka-ui'

const items = [
  // … large array of items
]
</script>

<template>
  <ComboboxRoot>
    …
    <ComboboxContent>
      <!-- Make sure to set a height for Virtualizer's parent element -->
      <ComboboxViewport class="max-h-80 overflow-y-auto">
        <ComboboxVirtualizer
          v-slot="{ option }"
          :options="items"
          :estimate-size="25"
          :text-content="(opt) => opt.label"
        >
          <ComboboxItem :value="option">
            {{ option.label }}
          </ComboboxItem>
        </ComboboxVirtualizer>
      </ComboboxViewport>
    </ComboboxContent>
  </ComboboxRoot>
</template>

常见问题

虚拟化不起作用

请确保 <Virtualizer> 的父元素具有明确的高度！

vue
<template>
  <ComboboxRoot>
    …
    <ComboboxContent>
      <!-- Height must be defined -->
      <ComboboxViewport class="max-h-80 overflow-y-auto">
        <ComboboxVirtualizer>
          …
        </ComboboxVirtualizer>
      </ComboboxViewport>
    </ComboboxContent>
  </ComboboxRoot>
</template>