Vue3 表格无限滚动该不该用库：先看这 3 个判断点

先给结论：表格无限滚动不是一个需求，而是三种需求——自动轮播式的匀速滚动、滚动到底自动加载下一页、以及大数据量的虚拟渲染。先分清自己是哪一种，再决定要不要引第三方库；多数"用了库反而更卡"的情况，都是因为需求判断错了。

新手拿到"表格要能一直滚"的需求，第一反应是搜一个现成的滚动库装上。装上之后常见两个结局：数据量小的时候嫌它重、数据量大的时候嫌它没解决问题。原因都一样——库解决的是它设计的那一种场景。

本文基于 Vue 3 的组合式写法，把三种需求各自的最小实现写出来，说清每种该用什么、什么情况下绝对不该用库。每段代码都能放进工程里直接跑。

先看结论

• 匀速自动轮播：用定时器加滚动容器的属性即可，不需要任何库。
• 触底加载下一页：用交叉观察器监听底部哨兵元素，两行核心代码。
• 数据量过千且要完整渲染：这才是虚拟列表的适用场景，且要接受它的限制。

组件生命周期相关的细节记不清时，翻 Vue3 教程 里按主题分组的章节最快。

一、先分清你要的是哪一种

把三种需求摆在一起看差异，这一步决定了后面所有选择。

判断标准是问两句：滚动是自动的还是用户驱动的，数据是一次给全还是分批给。两个问题的答案组合起来，指向的就是上表中的某一行。

适用边界要讲清：匀速自动滚动和触底加载可以同时存在，但虚拟列表和它们不是一回事。虚拟列表解决的是"节点太多渲染不动"，不是"滚动动画"。

二、匀速自动滚动：定时器就够了

大屏展示里最常见的表格无限滚动，其实是匀速往上滚，滚到底再回到开头。这种需求不需要库。

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

const box = ref(null);
let timer = null;

function start() {
  stop();
  timer = setInterval(() => {
    const el = box.value;
    if (!el) return;
    if (el.scrollTop + el.clientHeight >= el.scrollHeight - 1) {
      el.scrollTop = 0;
    } else {
      el.scrollTop += 1;
    }
  }, 30);
}

function stop() {
  if (timer) { clearInterval(timer); timer = null; }
}

onMounted(start);
onUnmounted(stop);
</script>

<template>
  <div ref="box" class="table-box" @mouseenter="stop" @mouseleave="start">
    <table><!-- 表格内容 --></table>
  </div>
</template>

这段做的是用定时器每 30 毫秒把滚动位置推进 1 像素，到底之后归零。鼠标移入暂停、移出继续，卸载时清掉定时器。

三个坑要提前避掉：滚动容器的高度必须是固定的且内容要溢出，否则没有可滚动的距离；定时器必须在卸载时清理，否则组件销毁后还在跑；鼠标悬停要能停，否则用户没法看某一行。

三、触底加载：交叉观察器

第二种是用户滚动到底部时自动拉下一页，这也是很多人说的无限滚动。实现它不需要监听滚动事件，浏览器原生的交叉观察器 IntersectionObserver 就是为这个场景准备的。

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

const sentinel = ref(null);
const loading = ref(false);
const page = ref(1);

async function loadMore() {
  if (loading.value) return;
  loading.value = true;
  const data = await fetch('/api/rows?page=' + page.value).then(r => r.json());
  rows.value.push(...data);
  page.value += 1;
  loading.value = false;
}

onMounted(() => {
  const io = new IntersectionObserver(entries => {
    if (entries[0].isIntersecting) loadMore();
  }, { rootMargin: '100px' });
  io.observe(sentinel.value);
});
</script>

<template>
  <table><!-- 已加载的行 --></table>
  <div ref="sentinel">加载中…</div>
</template>

这段做的是在列表底部放一个哨兵元素，用交叉观察器监听它是否进入视口，进入就拉下一页。加载标记用来防止同一页被重复请求。

性能取舍要讲清：这个方案只是分批取数据，节点会一直累积。滚到几千行之后页面照样会卡，此时才需要虚拟列表。

四、什么时候该引库，什么时候别引

真正需要虚拟列表的判断条件很明确：单页要渲染的行数过千，且这些行结构复杂。此时只渲染可视区域才有意义。

// 虚拟列表的核心计算：只算出可视区间该渲染哪些行
function visibleRange(scrollTop, viewportH, rowH, total) {
  const start = Math.floor(scrollTop / rowH);
  const count = Math.ceil(viewportH / rowH) + 2;
  return { start, end: Math.min(start + count, total) };
}

这段做的是按滚动位置算出应当渲染的行区间。真正的虚拟列表还要处理行高不等、滚动条高度补偿、快速滚动时的白屏，这些才是第三方库的价值所在。

别引库的情况同样明确：

1. 行数在几百以内——虚拟列表带来的计算开销和复杂度超过收益；
2. 行高不固定且差别很大——多数库要你给固定行高，强行用会出现跳动；
3. 页面需要打印或被搜索引擎抓取——未渲染的行根本不在文档里；
4. 表格有复杂合并单元格——虚拟渲染会破坏布局。

💡 小提示：引库之前先量一下。把数据直接铺开渲染，用性能面板测一次滚动帧率，帧率达标就不需要虚拟列表。

4.1 自动滚动到最后有空白

多半是滚动位置的判断用了等号比较，浮点误差导致永远不到底。修复方式是留 1 到 2 像素的容差。

4.2 触底加载同一页请求两次

缺少加载标记，或者观察器回调在标记更新前又被触发。修复方式是在发起请求前先置标记，请求结束再放开。

4.3 虚拟列表滚动时白屏

快速滚动时可视区间的计算跟不上。修复方式是加大缓冲区行数，并给行高一个稳定的估值。

4.4 验证清单

• 检查：先判定需求属于匀速滚动、触底加载还是大数据量渲染
• 运行：把数据量调到预期的三倍再滚一遍，观察帧率
• 预期：匀速滚动与触底加载在几百行内帧率稳定
• 失败：帧率明显下滑且节点数过千，才考虑虚拟列表
• 修复：按类别选实现，不要给匀速滚动套虚拟列表
• 验证：在较慢的机器上重复一次，结果一致才算稳定

上面这些步骤做的是先分类再实现。预期结果（未在本机执行）是三类场景各自用对方案后滚动都流畅；如果只有引库才流畅，说明确实属于大数据量场景。

总结

表格无限滚动要按需求分三类处理：匀速轮播用定时器、触底加载用交叉观察器、过千行才考虑虚拟列表。多数项目根本走不到第三种。

三条要点带走：

• 先分清自动滚、触底加载、大数据量渲染，三者不是一回事；
• 定时器方案要记得卸载清理和悬停暂停；
• 虚拟列表有行高固定、打印与抓取受限等代价，别提前引入。

下一步建议给项目定一条门槛：节点数没过千不引虚拟列表。表格组件的基础用法可以对照 Vue Elementplus 教程 再过一遍。

常见问题

Q：表格无限滚动一定要用第三方库吗？

A：不一定。匀速自动滚动和触底加载都能用十几行原生代码解决，只有行数过千且结构复杂时才值得引虚拟列表库。

Q：为什么自动滚到底之后会卡一下？

A：通常是到底判断用了精确等号，浮点误差让它反复触发归零。加 1 到 2 像素容差即可。

Q：触底加载为什么会重复请求同一页？

A：缺少加载标记，观察器在标记更新前又触发了一次。发起请求前先置标记，结束后再放开。

Q：虚拟列表有什么代价？

A：行高通常需要固定，未渲染的行不在文档里会影响打印和抓取，复杂合并单元格也会出问题。

Q：数据量多大才需要考虑虚拟列表？

A：没有固定数字，以实测为准。把数据铺开渲染后测滚动帧率，帧率不达标且节点数过千时再引入。

延伸学习

想把列表与滚动这块做扎实，可以按这个顺序来：

1. 想补一遍前端基础，Web前端入门扫盲课程 可以跟一遍；
2. 读一篇相关笔记 Vue数据请求created vs. mounted，理解加载时机对性能的影响；
3. 想随手验证一段逻辑，用 JavaScript 在线运行 跑一遍最快。