Vue3性能优化
从渲染、状态边界、列表、代码分割和监控角度整理 Vue3 性能优化的主线与判断顺序。
#tech / dev / frame
#resource / vue3
#type / synthesis
#status / evergreen
[!info] related notes
- 所属 MOC: Vue MOC
- 主题入口: vue3
- 相关概念: vue-render-and-update-flow, vue3-virtual-dom, vue-conditional-and-list-rendering, vue-next-tick, vue-router, pinia, vue-component-design-principles, vue-component-communication-selection
- 相关问题: vue-interview-high-frequency, [[vue-performance-related-interview-question|Vue 性能相关面试题]]
- 学习路径: vue-learning-roadmap, vue-interview-high-frequency
Vue3性能优化
Vue3 性能优化最容易做错的一点，是还没找到瓶颈，就开始堆“优化技巧”。真正有效的优化，通常先从理解渲染来源、状态边界和资源加载路径开始。
先建立正确前提
- Vue3 已经自带不少编译期和运行时优化
- 性能问题往往先来自错误状态设计、无意义渲染联动或资源过重
- 优化应该优先解决真实瓶颈，而不是堆术语
如果更新链路还没理顺，先回到 vue-render-and-update-flow。
最常见的几个优化入口
渲染与更新流程
先理解状态变化为什么会触发更新，再谈优化。见 vue-render-and-update-flow 和 vue3-virtual-dom。
状态边界
不是所有状态都该深度响应、都该共享、都该进 store。共享状态才考虑 pinia，局部状态尽量留在局部。
列表渲染
列表场景经常是前端性能问题高发区。重点看：
key是否稳定- 是否存在大列表
- 是否有不必要的整段重复渲染
相关主题见 vue-conditional-and-list-rendering。
代码分割与懒加载
路由级懒加载、异步组件和按需引入，通常比零碎运行时微优化更直接。相关入口见 vue-router。
资源与网络
图片体积、脚本包大小、缓存策略和接口响应，很多时候比框架层细节更先决定体感性能。
监控与度量
没有度量就没有优化。先用浏览器性能工具、打包体积分析和真实页面指标确认瓶颈位置。
几类常见策略
减少不必要的深层响应
对于大型对象或无需深度追踪的数据，可以考虑浅层响应或显式跳过响应式处理。
控制组件更新范围
把组件职责拆清楚，通常比在一个超大组件里补各种局部优化更有效。可结合 vue-component-design-principles 一起理解。
大列表使用专门方案
如果列表规模很大，应优先考虑虚拟滚动等结构性方案，而不是只盯着模板层写法。
优先做结构性优化
例如：
- 路由懒加载
- 异步组件
- 资源压缩
- 缓存策略
- 请求并发与去重
这些通常比细节级 tweak 更有收益。
常见误区
- 一上来就把所有问题归因到虚拟 DOM
- 还没测量，就到处加“优化代码”
- 把局部 UI 状态提升过高，导致更新联动扩大
- 列表缺少稳定
key，却去追别的性能点
一条实用优化顺序
- 先确认慢在哪里
- 再判断是资源、渲染、状态设计还是列表问题
- 优先做结构性优化
- 最后再做更细粒度的局部调优
最短记忆方式
Vue3 优化不是“记更多技巧”，而是先定位瓶颈，再从状态、渲染、列表和加载链路上做最有效的调整。