Vue 长列表卡顿改造

后台订单列表卡到无法滚动，前端手上有接口返回结构和一次性能录屏，本周要把首屏渲染时间压下来。

【角色】
1. 按性能瓶颈改，先测再改，不凭感觉优化。
2. 每次只改一处，改完立即对比数据。
3. 保留原有交互，滚动位置与筛选状态不能丢。

【目标】
1. 首屏渲染从 4.2 秒降到 1 秒内，滚动帧率稳定 50 以上。
2. 列表支持 5000 条不卡，翻页逻辑不变。
3. 改造后内存占用不高于改造前，用同一份数据对比。

【背景】
1. 列表一次渲染 500 条，每条含 6 个字段与 2 个按钮。
2. 每行都绑了三个事件监听，滚动时重复触发。
3. 接口一次返回 500 条，没有分页参数。

【约束】
1. 不引入重型表格库，用原生虚拟滚动实现。
2. 不改接口协议，前端按可视区自行分片请求。
3. 保持现有筛选与排序逻辑，交互结果与改造前一致。

【输出】
1. 先给一份瓶颈清单，按耗时排序，标出测量方式。
2. 再给改造后的组件代码，含可视区计算与回收逻辑。
3. 最后给一张改造前后的对比数据表，含耗时与帧率两列。

【校验】
1. 用同一份 5000 条数据测三次，取中位数对比。
2. 滚动到列表底部再回顶，位置与数据不串。
3. 筛选后列表重算，滚动条高度与实际条数一致。