Vue应用变慢主因是开发细节疏忽：组件过度渲染、资源加载不当、列表处理粗放；需落实路由/组件懒加载、合理使用ref/shallowRef/markRaw、规范key+虚拟滚动/分页、开启生产模式/摇树/SSR。
Vue 应用变慢，往往不是框架本身的问题，而是开发中一些关键优化点被忽略。真正影响性能的，常是组件过度渲染、资源加载时机不当、列表处理粗放这些细节。
按需加载：从路由到组件的懒加载
大应用首屏卡顿，多半因为一次性加载了太多 JS 和组件。Vue Router 的 异步组件 和 动态 import() 是最直接的解法。
- 路由级懒加载：用
component: () => import('./views/Home.vue')替代直接引入，让每个页面只在访问时才加载 - 组件级懒加载：对非首屏或条件触发的模块（如弹窗、图表、富文本编辑器），也采用
defineAsyncComponent或import()动态引入 - 配合 Webpack/ vite 的 预加载提示（
/* webpackPrefetch: true */）可让浏览器空闲时提前拉取，提升二次访问体验
减少响应式开销：合理使用 ref、shallowRef 和 markRaw
响应式系统是 Vue 的核心优势，但也是性能敏感区。不加区分地将大型对象或外部库实例（如 Three.js 场景、ECharts 实例）交给 reactive，会带来不必要的依赖追踪开销。
- 普通基础值用
ref，避免误用reactive包裹简单对象 - 大量静态属性的对象（如配置项、API 响应原始数据），优先用
shallowRef或shallowReactive，跳过深层代理 - 第三方类实例、函数、DOM 元素等非响应式目标，务必用
markRaw标记，防止被意外转为响应式
列表渲染优化：key 规范 + 虚拟滚动 + 分页/节流
长列表卡顿，本质是 DOM 节点过多 + 频繁 diff。单纯靠 v-for + key 不够，得组合策略。
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
立即学习“前端免费学习笔记（深入）”；
-
key必须唯一且稳定，禁用:key="index"；优先用数据唯一 ID，避免重排错乱 - 100 条以上数据建议启用虚拟滚动：用
vue-virtual-scroller或@tanstack/vue-virtual，只渲染可视区域内的节点 - 若无法用虚拟滚动（如需全量导出、复杂交互），改用分页、无限滚动（带节流）或时间切片（
requestIdleCallback分批渲染）
编译与构建阶段提效：开启生产模式 + 摇树 + SSR/SSG
很多性能问题其实在打包时就埋下了。Vue 应用上线前，必须确认构建配置是否“干净”。
- 确保
process.env.NODE_ENV === 'production'，关闭开发警告和调试信息 - 利用 Vite 或 Vue CLI 的默认摇树（tree-shaking），移除未使用的组件、指令、工具函数
- 对内容型页面（博客、文档、营销页），考虑 SSR（Nuxt）或 SSG（VitePress、Nuxt generate），直接输出静态 HTML，首屏秒开
不复杂但容易忽略。把懒加载当标配，把响应式控制当习惯，把列表处理当专项，把构建配置当上线 checklist——流畅感就自然来了。
