G 技术分享
Vue 列表输入卡 300ms:六处改动与各自的代价
5000 行订单列表,搜索框每敲一个字符卡 250ms。这篇文章拆解卡顿的真实来源(不是 computed 没缓存,是 patch 了 4 万个 DOM 节点),给出虚拟滚动、shallowRef、v-memo、key 选择的可用代码,以及每种优化不该用的场景。
2026-10-30
#Vue 3#渲染性能
1
Blog
格达软件工程师的实战经验、技术选型与行业观察
5000 行订单列表,搜索框每敲一个字符卡 250ms。这篇文章拆解卡顿的真实来源(不是 computed 没缓存,是 patch 了 4 万个 DOM 节点),给出虚拟滚动、shallowRef、v-memo、key 选择的可用代码,以及每种优化不该用的场景。
一个 3000 行不分页的订单表格,切路由白屏 1.8 秒、改筛选卡 400 毫秒。按测量结果逐项排查:内联箭头函数、模板内计算、reactive 深代理、v-memo 的漏依赖坑,最后用虚拟滚动把首屏压到 190ms。
在数字化转型浪潮中,越来越多的企业发现:通用型SaaS(如标准化ERP、CRM、OA)虽然上手快、成本低,但往往无法贴合自身业务逻辑。不同行业、不同规模的企业,在流程审批、数据权限、报表口径、生产排程等方面存在巨大差异。强行套用通用软件,轻则效率打折,重则业务与系统“两张皮”,最终沦为摆设。