G 技术分享
Vue 列表输入卡 300ms:六处改动与各自的代价
5000 行订单列表,搜索框每敲一个字符卡 250ms。这篇文章拆解卡顿的真实来源(不是 computed 没缓存,是 patch 了 4 万个 DOM 节点),给出虚拟滚动、shallowRef、v-memo、key 选择的可用代码,以及每种优化不该用的场景。
2026-10-30
#Vue 3#渲染性能
0
Blog
格达软件工程师的实战经验、技术选型与行业观察
5000 行订单列表,搜索框每敲一个字符卡 250ms。这篇文章拆解卡顿的真实来源(不是 computed 没缓存,是 patch 了 4 万个 DOM 节点),给出虚拟滚动、shallowRef、v-memo、key 选择的可用代码,以及每种优化不该用的场景。
一个 3000 行不分页的订单表格,切路由白屏 1.8 秒、改筛选卡 400 毫秒。按测量结果逐项排查:内联箭头函数、模板内计算、reactive 深代理、v-memo 的漏依赖坑,最后用虚拟滚动把首屏压到 190ms。
企业管理软件的难点不在功能多少,而在流程是否最短、数据是否准确。本文从需求边界、三端协同架构、集成与运维、交付验收四个层面,给出可落地的设计建议与验收指标。