Vue渲染性能优化围绕减少无效渲染、降低响应式开销、控制DOM规模三大目标展开，需按列表渲染、响应式控制、模板组件、构建加载四方面系统施策。
Vue 渲染性能优化不是堆砌技巧，而是围绕“减少无效渲染、降低响应式开销、控制 DOM 规模”三个核心目标展开的系统性工作。关键在于识别瓶颈后再精准出手——比如列表卡顿优先查 v-for 和 key，首屏慢先看组件加载和静态资源，频繁更新则聚焦响应式粒度。
一、列表渲染：从暴力遍历到按需呈现
万级数据用 v-for 直接渲染，浏览器会瞬间创建上万个 DOM 节点，内存飙升、滚动掉帧是必然结果。
- 对超过 100 条的数据列表，必须启用虚拟滚动。推荐使用
@vueuse/core的useVirtualList（Vue 3）或vue-virtual-scroller（Vue 2/3），它们自动管理可视区域、缓冲区和 DOM 复用 -
v-for必须配唯一:key，且禁用:key="index"。ID 类字段最稳妥；若无 ID，可提前生成稳定哈希值 - 避免
v-if和v-for同级混用。应改用计算属性预过滤：computed: { filteredList() { return this.list.filter(...); } }，让模板只专注渲染
二、响应式控制：别让 Vue 追踪它不需要的东西
深层响应式是强大功能，但也是性能开销来源——尤其当对象嵌套深、属性多或数组极大时。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 用
shallowRef替代ref存储大型数组（如 1000+ 条列表数据），跳过内部元素的响应式转换 - 用
shallowReactive管理仅需顶层变更通知的对象（如配置项、表单 schema），避免递归代理所有子属性 - 静态数据直接
Object.freeze()，Vue 2 和 Vue 3 均会跳过响应式处理，零开销
三、模板与组件：让 diff 更轻、复用更准
每次状态变化，Vue 都要执行虚拟 DOM diff。减少 diff 范围和深度，就是提升渲染效率。
立即学习“前端免费学习笔记（深入）”；
- 在 Vue 3.2+ 中，对重复结构（如表格行、卡片列表项）使用
v-memo。例如<tr v-memo="[row.id]">...，仅当row.id变化才重渲染整行 - 用
v-once标记完全静态内容（如版权信息、说明文案），首次渲染后彻底脱离响应式系统 - 复杂子组件配合
defineAsyncComponent懒加载，并包裹<Suspense>提供 loading 状态，避免阻塞主流程
四、构建与加载：让 JS 更小、加载更智
再快的渲染逻辑，也得等代码下载解析完才能跑。构建层优化直接影响用户第一眼体验。
- 路由级懒加载是基础：
const Home = () => import('./views/Home.vue')，配合 Webpack/Vite 自动代码分割 - 对非首屏重型组件（如富文本编辑器、3D 查看器），进一步做预加载策略：用户 hover 导航菜单时，提前
import()对应模块 - 启用
Tree Shaking并检查未使用的依赖；生产环境确保process.env.NODE_ENV === 'production'，关闭开发提示和警告
