Vue3 大表格性能:先减少响应式工作量
背景 大表格卡顿通常来自渲染数量、响应式开销或频繁派生计算。先区分瓶颈,再决定虚拟列表、分页还是数据模型调整。 核心判断 只渲染可见窗口并保留适当 overscan。 对不可变大数组使用 shallowRef,替换数组触发更新。 行 key 稳定,昂贵格式化与计算按实际依赖缓存。 最小示例 下面保留核心逻辑;业务类型、调用入口和环境配置按项目补齐。 const rows = shallowRef<Row[]>([]); const visibleRows = computed(() => rows.value.slice(start.value, end.value)); 边界与误区 切片只是虚拟列表的局部逻辑,还要维护滚动占位、行高和焦点。shallowRef 的深层原地修改不会自动更新,必须遵守不可变替换约定。 验证方式 在目标移动设备测试大数据滚动、排序和选中状态;记录长任务与内存,同时验证键盘导航、可访问性和屏幕尺寸变化。 小结 使用虚拟列表、稳定 key 和服务端筛选,避免把整份深层对象传给每个单元格。