Vue 项目中常见的性能优化手段有哪些？

1. 代码层面的优化（开发阶段）

• 合理使用 v-if 和 v-show：
  • v-if 是“真正”的条件渲染，涉及组件的销毁和重建，适合条件不经常改变的场景。
  • v-show 只是简单的 CSS display 切换，适合频繁切换显示状态的场景。
• 优化 v-for 列表渲染：
  • 必须添加 key：务必使用唯一且稳定的 ID 作为 key（如 item.id），严禁使用数组索引 index 作为 key，否则会导致 DOM 复用错误和不必要的重渲染。
  • 避免同时使用 v-if 和 v-for：Vue 2 中 v-for 优先级高于 v-if，Vue 3 中 v-if 优先级更高，但无论哪个版本，都建议将过滤逻辑放在计算属性或 JS 逻辑中，而不是直接在模板上混用，以减少遍历开销。
• 组件懒加载 (Lazy Loading)：
  • 对于大型项目，不要一次性加载所有组件。使用动态导入 import() 语法配合 defineAsyncComponent (Vue 3) 或路由级别的 component: () => import(...) 来实现按需加载，显著减少首屏包体积。
• 长列表优化：
  • 当需要渲染成千上万条数据时，使用虚拟滚动 (Virtual Scrolling) 技术（如 vue-virtual-scroller），只渲染可视区域内的 DOM 节点，大幅降低内存占用和渲染时间。
• 计算属性缓存 (computed)：
  • 对于依赖响应式数据的复杂计算，优先使用 computed 而非 methods。computed 具有缓存机制，只有依赖项变化时才会重新计算。
• 事件销毁与防抖节流：
  • 在组件销毁前（onBeforeUnmount / beforeDestroy）移除全局事件监听器（如 window.resize, scroll），防止内存泄漏。
  • 对高频触发的事件（如搜索输入、滚动、窗口调整）使用防抖 (Debounce) 或 节流 (Throttle)。

2. 构建与打包优化（工程化阶段）

• 代码分割 (Code Splitting)：
  • 利用 Webpack 或 Vite 的能力，将代码拆分为多个 Chunk。除了路由懒加载，还可以提取公共库（vendor）、大组件单独打包。
• Tree Shaking：
  • 确保使用 ES Module 语法 (import/export)，以便构建工具能剔除未使用的代码（Dead Code）。
  • 按需引入 UI 库组件（如 Element Plus, Ant Design Vue），避免全量引入。
• 资源压缩与优化：
  • 开启 Gzip 或 Brotli 压缩。
  • 图片资源优化：使用 WebP/AVIF 格式，对小图标使用 SVG 或 Icon Font，大图片使用懒加载。
• 预加载 (Preload/Prefetch)：
  • 使用 <link rel="preload"> 加载首屏关键资源。
  • 使用 <link rel="prefetch"> 在浏览器空闲时预加载下一页可能需要的资源（Vue Router 默认会对路由组件进行 prefetch）。
• 升级构建工具：
  • 如果项目较老，考虑从 Webpack 迁移到 Vite。Vite 基于 ESM 的开发服务器启动速度极快，生产构建使用 Rollup，通常能带来更好的性能和更小的包体积。

3. 运行时与架构优化

• 保持 Vue 版本更新：
  • 使用 Vue 3 替代 Vue 2。Vue 3 的响应式系统基于 Proxy，比 Vue 2 的 Object.defineProperty 更快，且支持更好的 Tree-shaking 和更小的包体积。
  • 在生产环境务必使用生产模式构建（移除警告和调试代码）。
• 状态管理优化：
  • 在使用 Pinia 或 Vuex 时，避免存储大量非响应式数据。
  • 合理划分 Store 模块，避免单个 Store 过大导致无关组件频繁更新。
• SSR (服务端渲染) 或 SSG (静态站点生成)：
  • 对于 SEO 要求高或首屏速度要求极高的场景，使用 Nuxt.js 进行 SSR 或 SSG，将 HTML 直接在服务端生成，减少客户端的水合（Hydration）时间和白屏时间。

4. 2026 年新趋势与工具

• 细粒度响应式：利用 Vue 3 的 shallowRef 和 shallowReactive 处理深层嵌套但不需要深度监听的大对象，减少代理开销。
• Web Workers：将繁重的数据处理任务（如大文件解析、复杂算法）移至 Web Worker 线程，避免阻塞主线程导致界面卡顿。
• AI 驱动的构建优化：部分新型构建插件开始利用 AI 分析代码依赖关系，实现更智能的“原子级代码分割”和预测性预加载。
• 性能监控：集成前端监控工具（如 Sentry, Web Vitals），实时监控 FCP (First Contentful Paint), LCP (Largest Contentful Paint) 等核心指标，数据驱动优化。

总结 Checklist