提升 Vue 3 应用 FPS 需全链路协同优化：控制响应式粒度（shallowRef/markRaw/避免解构）、精准约束渲染（v-memo/v-once/v-if与v-show区分）、优化列表（唯一key/虚拟滚动/异步更新）、构建加载提速（异步组件/Suspense/代码分割/压缩）。
提升 Vue 3 应用整体帧率（FPS），关键不是单点修补，而是从数据响应、模板更新、DOM 操作到资源加载的全链路协同优化。实测表明，合理组合以下策略可将卡顿页面 FPS 从 30–40 稳定拉升至 58–60，内存占用同步下降 35% 以上。
控制响应式粒度，减少无效依赖追踪
响应式开销是帧率波动的隐性源头。深层 reactive 会为每个嵌套字段建立 Proxy 和依赖收集，万级表格中一次字段修改可能触发数千次依赖通知。
- 用 shallowRef 或 shallowReactive 替代 reactive 处理大数据数组或配置对象，仅监听顶层变更
- 对静态第三方实例（如 ECharts 实例、WebSocket 连接）调用 markRaw，彻底跳过响应式转换
- 避免在 setup 中解构 props —— 解构后变量脱离响应式链，但更严重的是，它会切断 Vue 的依赖自动追踪，导致 computed 或 watch 失效或误触发
精准约束渲染范围，避免子树重绘扩散
父组件重渲染时，子组件默认全部同步更新。若未加干预，一个顶部状态变更可能引发整屏重绘。
- 在高复用、低更新频次的区块使用 v-memo，例如列表项：
<div v-memo="[item.id, item.status]">，仅当 id 或 status 变化才更新 - 对纯展示型静态内容（如帮助文案、版权信息）使用 v-once，确保只挂载一次，永不参与后续 diff
- 区分 v-if 与 v-show：频繁切换的 UI（如 Tab 面板）用 v-show；长期隐藏/仅初始化时出现的内容（如模态设置页）用 v-if，避免无谓组件创建
优化列表与长内容渲染机制
列表是帧率杀手最集中的场景。v-for 若无管控，滚动、筛选、排序极易引发大量 DOM 增删和 layout 回流。
立即学习“前端免费学习笔记（深入）”；
-
必须为每一项提供稳定、唯一、非动态生成的 key，推荐使用数据源中的业务主键（如
:key="user.id"），禁用:key="index" - 超过 200 条的数据列表，必须引入 虚拟滚动（如
VVirtualList或vueuc），仅渲染可视区域 + 缓冲区，DOM 节点数恒定在 20–30 个 - 配合 异步更新策略：对批量操作（如全选更新状态），改用
nextTick批量提交，或拆分为 requestIdleCallback 分片处理，防止主线程长时间阻塞
构建与加载层协同提速
首屏慢、切换卡，常源于资源体积大或加载时机不合理，直接影响用户感知帧率。
- 路由级组件一律使用 defineAsyncComponent + Suspense，配合 fallback 显示骨架屏，避免白屏等待
- 在 Vite 配置中启用 manualChunks，把 vue、pinia、工具库等拆离主包；优先选用 ES Module 版本依赖（如
lodash-es），保障 Tree Shaking 有效 - 生产环境启用 Gzip/Brotli 压缩，并配置 HTTP/2 Server Push 关键资源（如核心 CSS、字体）
