Appearance
Vue 应用性能:组件更新边界、稳定性与常见热点
主题边界
- Vue 应用性能同时包含构建体积、首屏渲染、更新成本、列表滚动和异步请求链。
- 优化前要先定位瓶颈属于哪一层。
机制与流程
- 运行时性能取决于组件边界是否稳定、依赖是否最小化、列表 key 是否可靠以及副作用是否被批量调度。
- 编译期优化如静态提升、PatchFlags、Block Tree 只能减少框架工作量,无法替代糟糕的状态设计。
- 大型列表通常要依赖虚拟滚动、分片渲染和图片懒加载,而不是单纯寄望 diff 足够快。
关键差异
computed缓存解决的是派生值重复计算,不解决组件树本身无意义更新。- KeepAlive、Suspense、异步组件、代码分割分别优化的是不同阶段的成本。
边界条件
- 为了“优化”而滥用 memo、缓存和全局 store,常会增加复杂度并制造陈旧数据问题。
- 性能问题不能只看 FPS,还要结合 LCP、长任务、内存占用和错误率。
工程落点
- 高频交互页面应先稳定 props、拆分热路径组件,再处理大列表和重请求场景。
- Vue Devtools、浏览器 Performance 面板和埋点指标要结合使用,才能区分框架开销与业务逻辑开销。