背景

大表格卡顿通常来自渲染数量、响应式开销或频繁派生计算。先区分瓶颈，再决定虚拟列表、分页还是数据模型调整。

核心判断

  1. 只渲染可见窗口并保留适当 overscan。
  2. 对不可变大数组使用 shallowRef，替换数组触发更新。
  3. 行 key 稳定，昂贵格式化与计算按实际依赖缓存。

最小示例

下面保留核心逻辑；业务类型、调用入口和环境配置按项目补齐。

const rows = shallowRef<Row[]>([]);
const visibleRows = computed(() => rows.value.slice(start.value, end.value));

边界与误区

切片只是虚拟列表的局部逻辑，还要维护滚动占位、行高和焦点。shallowRef 的深层原地修改不会自动更新，必须遵守不可变替换约定。

验证方式

在目标移动设备测试大数据滚动、排序和选中状态；记录长任务与内存，同时验证键盘导航、可访问性和屏幕尺寸变化。

小结

使用虚拟列表、稳定 key 和服务端筛选，避免把整份深层对象传给每个单元格。