1. 从真实痛点出发：为什么我们需要虚拟滚动？

如果你做过前端开发，尤其是处理过数据量稍大一些的后台管理系统、数据报表或者类似“城市选择器”这种包含成千上万条数据的组件，那你一定对“页面卡顿”这四个字深恶痛绝。我印象最深的一次，是做一个供应商管理模块，一个表格需要展示近万条带有多级联动的数据。当时直接用了 Element UI 的 Table 组件，结果页面一打开，浏览器直接“转圈”十几秒，然后整个标签页都变得异常卡顿，滚动一下鼠标都要等半天才能响应。打开 Chrome 的性能面板一看，好家伙，几万个 DOM 节点挂在树上，内存占用飙升，重绘和回流触发的频率高得吓人。这就是典型的“暴力渲染”带来的恶果。

问题的根源在于浏览器的渲染机制。每一个列表项或表格行，无论是否在可视区域内，都会被创建为真实的 DOM 节点。当数据量达到数千甚至上万时，DOM 树会变得极其臃肿。这会导致几个致命问题： 首屏加载时间极长 （因为要生成所有节点）、 内存占用巨大 （每个节点都占用内存）、 滚动和交互卡顿 （频繁的布局计算和重绘）。用户看到的可能只是一个 10 行高的小窗口，但浏览器却在背后默默承受着渲染一万行的压力。

这时候，“虚拟滚动”技术就成为了救星。它的核心思想非常直观： 只渲染用户看得见的部分 。你可以把它想象成一个拿着望远镜看长卷画的人，望远镜的镜筒就是浏览器的可视区域，他只需要看清当前镜筒对准的那一小部分画面即可，而不需要把整幅长达百米的画卷一次性全部展开铺在面前。技术上，虚拟滚动通过动态计算可视区域，只创建和渲染位于该区域内的 DOM 节点，对于区域外的节点，则用等高的空白元素（或称占位符）进行填充，从而保持滚动条的总高度与实际数据量相符。这样，无论数据源有一千条还是一百万条，实际需要渲染和管理的 DOM 节点数量，仅仅等于一屏能展示的数量（通常几十到几百个），性能瓶颈迎刃而解。

在 Vue 生态中，要实现虚拟滚动，我们通常有几个选择：一是自己从头实现，这需要对滚动监听、位置计算、动态渲染有很深的理解，成本较高；二是使用一些专门的虚拟滚动库，如 vue-virtual-scroller ；三是寻找本身就集成了虚拟滚动功能的 UI 组件库。而 vxe-table ，正是第三种选择中的佼佼者。它不仅是一个功能强大的表格组件，更将虚拟滚动的能力深度集成到了表格（Grid）和列表（List）中，甚至支持了更复杂的树形结构（Tree）的虚拟滚动。这对于需要处理海量数据同时又要求复杂交互的前端应用来说，是一个极具吸引力的解决方案。

2. vxe-table 虚拟滚动能力全景图：不止于表格

很多开发者第一次接触 vxe-table 是因为它的表格功能，但它的虚拟滚动体系实际上是一个更广义的“虚拟渲染”解决方案，覆盖了多种数据展示形态。理解它的能力边界，能帮助我们在合适的场景选择正确的组件。

2.1 虚拟列表：超长列表的终极优化方案

虚拟列表是虚拟滚动最经典的应用场景。 vxe-table 通过 <vxe-list> 组件提供了开箱即用的虚拟列表支持。它的适用场景非常广泛：

• 聊天记录/消息流 ：需要无限加载的历史消息。
• 日志查看器 ：动辄几万行的系统或操作日志。
• 大型选择器 ：比如全国城市列表、公司员工列表等。
• 时间线或动态列表 ：社交媒体动态、新闻资讯流。

与普通列表渲染相比，虚拟列表的核心优势在于其恒定的渲染开销。假设你的可视区域高度为 500px，每个列表项高度为 50px，那么无论数据源有多少条，同时存在于 DOM 中的列表项最多只有 500 / 50 = 10 个（上下可能多渲染几个作为缓冲）。 vxe-list 会自动处理滚动位置计算、动态渲染和滚动条模拟，你只需要像写普通列表一样提供数据和模板即可。

2.2 虚拟树：处理海量层级数据的利器

树形结构的数据展示（如组织架构、文件系统、分类目录）在数据量大时同样面临性能问题。传统的树组件展开一个节点，就会递归渲染其所有子节点，当层级深、子节点多时，性能会急剧下降。

vxe-table 的 <vxe-tree> 组件支持虚拟滚动，完美解决了这个问题。它的“虚拟”体现在纵向（深度）和横向（广度）两个维度：

1. 纵向虚拟 ：并非一次性渲染整棵树的所有节点，而是只渲染当前滚动视窗内的节点。即使你有十万个节点，展开一个包含五千个子节点的父节点，渲染压力也仅限于一屏。
2. 横向虚拟（可选） ：对于超宽的树节点内容（比如很长的文本），可以结合横向滚动进行虚拟渲染。

这对于像“全公司组织架构图”（可能数万人）或“大型产品分类树”这样的场景是革命性的。你不再需要担心全部展开会导致浏览器崩溃，用户可以自由地展开/折叠、滚动浏览。

2.3 虚拟表格：大数据表格的标配

这是 vxe-table 的看家本领。 <vxe-grid> 组件同时支持 纵向虚拟滚动 和 横向虚拟滚动 。

• 纵向虚拟滚动 ：解决行数据量大的问题。这是最常见的需求，例如展示万行级别的交易记录、用户清单。
• 横向虚拟滚动 ：解决列数量多的问题。当表格有上百列时，横向虚拟滚动可以保证只有可视区域内的列被真实渲染，左右滚动流畅。

更强大的是，它可以 同时开启 纵向和横向虚拟滚动，以应对“既长又宽”的超大型数据表格。在金融、电信、物联网等领域的实时监控大屏或数据查询平台中，这种能力至关重要。

2.4 虚拟滚动的核心参数与配置逻辑

无论使用上述哪种组件，开启虚拟滚动的核心都是几个关键配置。理解它们，才能用好虚拟滚动。

<template>
  <!-- 虚拟列表示例 -->
  <vxe-list height="400" :data="hugeList" :virtual-scroll="{ itemSize: 50 }">
    <template #default="{ items }">
      <div v-for="item in items" :key="item.id" class="list-item">
        {{ item.name }}
      </div>
    </template>
  </vxe-list>

  <!-- 虚拟表格示例 -->
  <vxe-grid
    border
    height="500"
    :columns="columns"
    :data="hugeTableData"
    :scroll-x="{ gt: 50 }" <!-- 当列数大于50时启用横向虚拟滚动 -->
    :scroll-y="{ gt: 100 }" <!-- 当行数大于100时启用纵向虚拟滚动 -->
  />
</template>

• height / max-height ：这是 触发虚拟滚动的必要条件 。你必须为组件设定一个固定高度或最大高度，这样组件才能计算出可视区域的范围。很多新手踩的第一个坑就是忘记设置高度，导致虚拟滚动不生效。
• virtual-scroll (List/Tree) 或 scroll-x / scroll-y (Grid) ：用于启用和配置虚拟滚动。
  • itemSize (List): 告诉组件每个列表项的预估高度（单位px）。这个值用于计算总滚动高度和定位。如果项目高度不固定，可以设置为 null ，但性能会略有损耗，因为需要动态测量。
  • gt (Grid): 一个非常实用的阈值配置。例如 { gt: 100 } 表示当数据行数 大于 100时，才启用虚拟滚动。对于小数据量，直接渲染反而更简单高效。这个设计避免了“杀鸡用牛刀”，让配置更智能。
• oSize (List/Tree) ：指渲染缓冲区，即视窗上方和下方额外渲染的不可见项目数。适当调大（如默认值可能为5）可以让快速滚动时过渡更平滑，但会轻微增加DOM节点数。需要根据项目高度和滚动速度权衡。

注意 ： itemSize 的设定至关重要。如果设定值远小于实际项目高度，会导致滚动条滑块过大，滚动过快；如果设定值远大于实际高度，则滚动条滑块过小，滚动缓慢。对于高度不固定的情况，建议先给一个平均值，或者使用动态计算高度的方法。

3. 实战集成：在 Vue 3 项目中一步步引入 vxe-table 虚拟滚动

理论说再多，不如动手跑一遍。我们以一个 Vue 3 + Vite 的项目为例，演示如何集成 vxe-table 并使用其虚拟滚动功能。

3.1 环境准备与安装

首先，创建一个新的 Vite 项目或进入你的现有项目。

# 创建Vue项目（如果尚未创建）
npm create vue@latest my-vxe-app
cd my-vxe-app
npm install

# 安装 vxe-table 核心库及其配套的组件样式、图标和工具库
npm install xe-utils vxe-table@next

这里安装的是 vxe-table@next ，即支持 Vue 3 的版本。 xe-utils 是其内部依赖的工具函数库。

3.2 全局引入与样式配置

虽然 vxe-table 支持按需引入以优化包体积，但对于新手或中型以上项目，全局引入更为方便。在 main.js 或 main.ts 中：

import { createApp } from 'vue'
import App from './App.vue'

// 1. 引入 VXETable 核心
import VXETable from 'vxe-table'
// 2. 引入组件样式（主题）
import 'vxe-table/lib/style.css'
// 3. 可选：引入图标库（表格功能图标需要）
import 'vxe-table/lib/icon.css'

const app = createApp(App)

// 全局注册
app.use(VXETable)

app.mount('#app')

3.3 构建一个支持虚拟滚动的超大数据表格

假设我们有一个用户交易记录表格，数据量在1万条以上，包含ID、时间、用户、金额、状态等字段。

步骤一：定义表格列和数据模拟

在组件中，我们先定义列结构和模拟大量数据。

<template>
  <div class="virtual-table-demo">
    <vxe-grid ref="gridRef" v-bind="gridOptions"></vxe-grid>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'

// 模拟生成1万条数据
const mockData = () => {
  const data = []
  for (let i = 0; i < 10000; i++) {
    data.push({
      id: i + 1,
      tradeTime: `2023-10-${String(Math.floor(Math.random() * 30) + 1).padStart(2, '0')} 14:30:${String(i % 60).padStart(2, '0')}`,
      userName: `用户${Math.floor(Math.random() * 9000) + 1000}`,
      amount: (Math.random() * 10000).toFixed(2),
      status: ['成功', '处理中', '失败'][Math.floor(Math.random() * 3)]
    })
  }
  return data
}

const tableData = ref(mockData())

// 定义表格列
const tableColumns = reactive([
  { type: 'seq', width: 60, title: '序号', fixed: 'left' }, // 固定左侧的序列号列
  { field: 'id', title: '交易ID', width: 120, sortable: true },
  { field: 'tradeTime', title: '交易时间', width: 180, sortable: true },
  { field: 'userName', title: '用户', width: 150 },
  { field: 'amount', title: '金额(元)', width: 130, align: 'right', sortable: true },
  { field: 'status', title: '状态', width: 100, filters: [{ label: '成功', value: '成功' }, { label: '失败', value: '失败' }] },
  // ... 可以继续添加更多列，测试横向虚拟滚动
  { field: 'remark', title: '备注', width: 300, showOverflow: true } // 长文本列
])

// 定义表格配置项
const gridOptions = reactive({
  border: true, // 显示边框
  resizable: true, // 允许调整列宽
  showOverflow: true, // 内容超出时显示省略号
  height: 600, // !!! 关键：固定高度，触发虚拟滚动
  columns: tableColumns,
  data: tableData,
  scrollY: { gt: 50 }, // 行数大于50时启用纵向虚拟滚动
  scrollX: { gt: 10 }  // 列数大于10时启用横向虚拟滚动（本例列数少，可能不触发，仅为演示）
})
</script>

<style scoped>
.virtual-table-demo {
  padding: 20px;
}
/* 可以自定义行高、单元格样式等 */
</style>

关键点解析：

1. height: 600 ：这是 灵魂配置 。没有固定高度，虚拟滚动就无法计算可视区域，会退化为全量渲染。
2. scrollY: { gt: 50 } ：智能阈值。只有当数据行数超过50行时，才启动纵向虚拟滚动。对于少于50行的表格，直接渲染性能更好。你可以根据实际情况调整这个阈值。
3. scrollX: { gt: 10 } ：同理，用于控制横向虚拟滚动的触发条件。
4. fixed: 'left' ：注意，在虚拟滚动的表格中，固定列的实现机制与普通表格不同。 vxe-table 能很好地处理固定列与虚拟滚动的兼容问题。

运行项目，你会发现即使有1万行数据，表格的渲染速度、滚动流畅度都与渲染100行数据时几乎没有区别。打开浏览器的开发者工具，在“元素”面板中观察，滚动时只有可视区域内的 <tr> 元素在动态创建和销毁，DOM 节点数始终保持在一个很低的水平。

3.4 集成虚拟列表：以聊天记录为例

列表的使用比表格更简单。我们模拟一个聊天记录页面。

<template>
  <div class="chat-demo">
    <div class="chat-header">群聊记录 (共{{ messageList.length }}条)</div>
    <!-- 虚拟列表核心组件 -->
    <vxe-list
      ref="listRef"
      class="chat-list"
      :data="messageList"
      :virtual-scroll="{ itemSize: 80, oSize: 8 }"
      height="500px"
      @scroll="handleListScroll"
    >
      <template #default="{ items }">
        <div v-for="item in items" :key="item.id" class="message-item">
          <div class="avatar">{{ item.sender.charAt(0) }}</div>
          <div class="content">
            <div class="sender">{{ item.sender }} <span class="time">{{ item.time }}</span></div>
            <div class="text">{{ item.text }}</div>
          </div>
        </div>
      </template>
    </vxe-list>
    <div class="input-area">
      <input v-model="newMessage" @keyup.enter="sendMessage" placeholder="输入消息..." />
      <button @click="sendMessage">发送</button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 模拟初始聊天记录
const generateMessages = (count) => {
  const senders = ['张三', '李四', '王五', '赵六', '小七']
  const messages = []
  for (let i = 0; i < count; i++) {
    const sender = senders[Math.floor(Math.random() * senders.length)]
    messages.push({
      id: i + 1,
      sender,
      time: `10:${String(i % 60).padStart(2, '0')}`,
      text: `这是第${i + 1}条模拟聊天记录，来自${sender}。虚拟滚动确保了流畅的浏览体验。`.slice(0, 50 + Math.random() * 50)
    })
  }
  return messages
}

const messageList = ref(generateMessages(1000)) // 1000条记录
const newMessage = ref('')
const listRef = ref()

// 发送新消息（添加到顶部，模拟最新消息）
const sendMessage = () => {
  if (!newMessage.value.trim()) return
  const newMsg = {
    id: messageList.value.length + 1,
    sender: '我',
    time: '刚刚',
    text: newMessage.value
  }
  messageList.value.unshift(newMsg) // 添加到头部
  newMessage.value = ''

  // 可选：发送后自动滚动到最新位置（顶部）
  // 对于虚拟列表，直接设置 scrollTop 为 0 即可
  setTimeout(() => {
    if (listRef.value) {
      listRef.value.scrollTo(0)
    }
  }, 50)
}

// 处理滚动事件，可用于实现无限加载（加载更早的历史记录）
const handleListScroll = ({ scrollTop, scrollTopMax }) => {
  // 滚动到底部附近时，加载更多历史消息
  if (scrollTop >= scrollTopMax - 50) {
    // 模拟异步加载
    setTimeout(() => {
      const moreMsgs = generateMessages(20)
      // 注意：虚拟列表对数据变化是响应的，直接 push 即可
      messageList.value.push(...moreMsgs.map(msg => ({...msg, id: messageList.value.length + msg.id})))
    }, 500)
  }
}

onMounted(() => {
  // 组件挂载后，可以滚动到底部（查看最新消息）
  setTimeout(() => {
    if (listRef.value) {
      listRef.value.scrollTo(null, 'max') // 滚动到底部
    }
  }, 100)
})
</script>

<style scoped>
.chat-demo {
  width: 400px;
  margin: 0 auto;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
}
.chat-header {
  padding: 12px;
  background: #f0f0f0;
  font-weight: bold;
  text-align: center;
}
.chat-list {
  background: #fafafa;
}
.message-item {
  display: flex;
  padding: 12px;
  border-bottom: 1px solid #eee;
  min-height: 80px; /* 与 itemSize 对应 */
  box-sizing: border-box;
}
.message-item .avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #409eff;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  flex-shrink: 0;
}
.message-item .content {
  flex: 1;
}
.message-item .sender {
  font-weight: bold;
  margin-bottom: 4px;
}
.message-item .sender .time {
  font-weight: normal;
  color: #999;
  font-size: 0.9em;
  margin-left: 10px;
}
.message-item .text {
  color: #333;
  line-height: 1.5;
}
.input-area {
  display: flex;
  padding: 12px;
  border-top: 1px solid #ddd;
}
.input-area input {
  flex: 1;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-right: 8px;
}
.input-area button {
  padding: 8px 16px;
  background: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>

关键点解析：

1. :virtual-scroll="{ itemSize: 80, oSize: 8 }" ：这里我们预估每条消息的高度为80px（通过CSS的 min-height 保证）。 oSize 设置为8，意味着会在可视区域上下各多渲染8条作为缓冲，使得快速滚动时不会出现白屏。
2. height="500px" ：同样，必须设置固定高度。
3. @scroll 事件：我们利用它来实现滚动到底部时自动加载更多历史消息（无限滚动）。 scrollTopMax 属性非常有用，它代表了最大可滚动距离。
4. 数据响应性 ： vxe-list 完全响应 data 的变化。无论是 unshift （新消息）、 push （加载历史）还是 splice （删除消息），列表都会自动更新并保持正确的滚动位置。这是它比许多手动实现的虚拟滚动方案更优秀的地方。

4. 进阶技巧与避坑指南：让虚拟滚动更稳健高效

在实际项目中使用虚拟滚动，会遇到一些特定场景下的挑战。下面分享一些我踩过坑后总结的经验。

4.1 动态高度与自适应内容

上面的例子我们假设了固定高度（ itemSize ）。但现实中，列表项高度可能不固定，比如包含折叠文本、图片（加载后高度变化）等。 vxe-table 的虚拟列表和表格对此有支持。

方案一：使用 itemSize: null 将 itemSize 设为 null ，组件会使用一个默认的预估高度，并在渲染后动态测量实际高度来更新滚动条。这能解决高度不固定的问题，但有两个代价：

1. 性能损耗 ：需要额外的测量和计算。
2. 滚动条跳动 ：在初始渲染或快速滚动时，如果预估高度和实际高度差异大，滚动条长度会突然变化，导致体验不佳。

方案二：使用 scroll-to-row 与自定义测量（推荐） 对于表格，更稳妥的做法是结合业务逻辑。如果行高变化有规律（比如展开详情行），可以通过 :row-config="{ height: 80 }" 设置基础行高，对于展开的行，则通过计算属性动态返回一个更大的高度，但这需要更复杂的逻辑。

实操心得 ：对于聊天列表这种高度差异不大的场景，设置一个稍大于平均值的 itemSize （如100px），然后通过CSS控制内容不超出，是简单有效的方案。对于高度完全不可预测的复杂列表，可能需要评估是否真的适合用虚拟滚动，或者考虑分页。

4.2 与复杂功能（排序、筛选、合并）的兼容性

虚拟滚动只负责渲染优化， vxe-table 的表格功能如排序、筛选、合并单元格等都能正常工作。但需要注意：

• 排序/筛选后 ：数据源会变化，虚拟滚动会自动重新计算。但滚动位置通常会重置到顶部，这是符合预期的行为。
• 固定列 ：在开启横向虚拟滚动时，固定列（ fixed: 'left' 或 'right' ）的实现是独立的，它们会脱离横向虚拟滚动区域，始终显示。确保固定列的宽度总和不要超过表格宽度，否则会出现布局问题。
• 合并单元格 ：虚拟滚动区域内的合并单元格渲染是正常的。但如果合并跨越了虚拟滚动的“区块”边界，可能会出现渲染异常。建议在设计表格时，避免在可能启用虚拟滚动的大数据量表格中使用跨越多行的复杂合并。

4.3 性能监控与调试

如何确认虚拟滚动真的在起作用并且性能良好？

1. Chrome DevTools Performance 面板 ：录制滚动操作，查看 Layout , Recalc Style , Paint 等耗时。虚拟滚动下，这些耗时应该非常短且平稳。
2. Chrome DevTools Elements 面板 ：观察 DOM 节点数。滚动时，对应的 tr 或 div 节点应该只有可视区域内的那些在动态变化，总数保持低位。
3. vxe-table 自带的性能提示 ：在开发模式下，如果配置不当（如未设置高度），控制台可能会有警告提示。

4.4 常见问题排查

问题一：设置了高度，但滚动条很奇怪，或者滚动行为异常。

• 检查点 ：确认父容器没有 overflow , transform , position: fixed 等可能影响滚动容器计算的样式。虚拟滚动需要基于你设置的 height 的容器进行绝对定位计算。
• 检查点 ：确认 itemSize 设置是否合理。与实际平均高度相差过大会导致滚动条比例失调。可以暂时关闭虚拟滚动对比一下滚动条总长度。

问题二：快速滚动时出现短暂白屏。

• 解决方案 ：适当增大 oSize （缓冲区大小），比如从默认的5调到10或15。这会让组件提前渲染更多不可见项目，以应对快速滚动。但这会轻微增加DOM节点数，需要权衡。
• 解决方案 ：检查单个列表项/表格行的渲染复杂度。如果每个项目内部都有非常复杂的计算或子组件，即使只渲染几十个，也可能造成卡顿。需要考虑对项目组件本身进行优化（如使用 v-once , v-memo ，或简化模板）。

问题三：表格结合分页加载时，滚动位置无法保持。

• 场景 ：你滚动到第5000条记录附近，然后切换了筛选条件或进行了分页操作，数据更新后滚动条跳回了顶部。
• 分析 ：这是预期行为，因为数据源发生了根本性变化。如果需要保持“浏览位置”的感觉，通常需要结合“无限滚动”模式，而不是分页。或者，在业务逻辑上记录上次查看的ID，数据更新后自动滚动到该ID附近。

4.5 横向虚拟滚动的特殊注意事项

横向虚拟滚动主要用于列特别多的表格。除了设置 scroll-x: { gt: N } ，还需注意：

• 列宽设置 ：建议为每一列设置明确的 width ，这样表格能准确计算总宽度和横向滚动条。
• 固定列 ：左右固定列会始终显示，不参与横向虚拟滚动。
• 性能 ：同时开启横纵虚拟滚动时，对滚动的计算会更复杂。如果性能要求极致，可以评估是否真的需要同时开启，或者能否通过设计（如隐藏非核心列）来减少列数。

5. 虚拟滚动的边界：何时该用，何时不该用？

虚拟滚动是性能优化的利器，但并非银弹。在以下场景，它可能不是最佳选择，甚至带来额外复杂度：

1. 数据量很小（< 100条） ：此时虚拟滚动的计算开销可能超过直接渲染的开销。直接渲染更简单，功能兼容性也更好。利用 scroll-y: { gt: 100 } 这样的阈值配置可以自动规避此问题。
2. 需要极高的交互频率 ：如果用户需要对表格进行非常频繁的、非滚动的操作（如每行都有复杂的编辑、拖拽），虚拟滚动带来的DOM回收与重建可能会与这些操作产生冲突，增加状态管理的复杂度。
3. 行高极端不规则且变化频繁 ：如果每一行的高度都完全无法预估且差异巨大（比如一个富文本编辑器列表），动态测量会导致滚动条不断跳动，体验很差。这种情况下，分页或“无限滚动+动态高度缓存”可能是更复杂的替代方案。
4. 对可访问性要求极高 ：虚拟滚动会破坏原生DOM的顺序和连续性，可能对屏幕阅读器等辅助工具不友好。虽然现代虚拟滚动库都在努力改善，但在要求严格的无障碍场景下需要充分测试。

我的个人经验是 ：对于后台管理系统、数据中台、日志分析等以“查看”为主，数据量常在数百到数万行之间的场景， vxe-table 的虚拟滚动是提升体验的必选项。它极大地提升了应用的响应速度和专业感。对于更复杂的前端应用，如表单密集的表格或高度动态的内容，则需要结合具体交互，进行更细致的设计和测试。

最后，再分享一个调试小技巧：在开发初期，可以先将虚拟滚动的阈值设得非常低（如 gt: 0 ），强制开启，然后观察控制台警告和性能表现，这能帮你快速发现配置问题。稳定后再调整到合理的生产环境阈值。