我整理了一份 Vue 性能优化指南（给AI用的）

为什么做这个

说实话，这个项目是我自己用的。

工作这几年，遇到的性能问题基本都是类似的坑：接口瀑布流
、bundle 越来越大、响应式乱用。每次踩完坑修好了，过段时间换个项目又踩一遍。

后来想着，干脆整理一份文档，自己查方便，也能给 AI 编码助手看（我现在用 Claude Code
），这样审代码的时候能提前发现问题。

整理完发现，好像也可以分享出来，说不定有人也遇到过这些问题。

我踩过的坑

这几年写 Vue 项目（Vue 2
/3 +
Nuxt 都有），踩过不少坑：

接口请求变成瀑布流一个await接一个await，明明能并行的请求硬是串行了。用户抱怨页面慢，一查发现 3 个接口排队等了 750ms。

bundle 体积失控每次加需求就往里塞代码，没人关心打包结果。等到首屏白屏 3 秒了，才发现 JavaScript 已经 300KB+。

响应式系统滥用大对象直接ref()，上千条商品数据，每个字段都变成响应式。渲染一卡一卡的，还以为是组件写得不好。

这些问题不是什么高深的优化，就是基本功。但忙起来就容易忽略，等出问题再改成本就高了。

怎么说呢，优化要分轻重

我发现很多人（包括以前的我）做性能优化会搞错重点。

举个例子：页面有 600ms 的请求等待时间，结果花一周优化computed缓存。首屏加载了 300KB 的 JavaScript，结果去优化循环少跑几次。

其实应该先解决大问题：

1. 先干掉请求瀑布流- 能并行就并行，该预加载就预加载
2. 再砍 bundle 体积- 代码分割、动态导入、tree-shaking
3. 然后才是组件和响应式优化- 减少不必要的渲染

我按这个思路把规则分成了10 个类别，从CRITICAL到LOW，总共46 条。先把影响大的问题解决了，那些微优化可以慢慢来。

里面有什么

10 个类别，46 条规则：

• 消除异步瀑布流（CRITICAL）
• 包体积优化（CRITICAL）
• 服务端性能（HIGH）
• 客户端数据获取（HIGH）
• 响应式系统优化（MEDIUM-HIGH）
• 渲染性能（MEDIUM）
• Vue 2 特定优化（MEDIUM）
• 
  Vue 3特定优化（MEDIUM）
• JavaScript 性能（LOW-MEDIUM）
• 高级模式（LOW）

每条规则的格式：

• 影响等级（CRITICAL / HIGH / MEDIUM / LOW）
• 错误示例（我以前写过的错误代码）
• 正确示例（后来改成什么样）
• Vue 2/3 兼容性说明

举几个我踩过的坑

坑 1：不需要的 await 也在阻塞代码

以前写过这样的代码：

async function handleRequest(userId: string, skipProcessing: boolean) { // 即使 skipProcessing=true，也会等待 userData const userData = await fetchUserData(userId) ​ if (skipProcessing) { // 立即返回，但前面已经浪费时间等待了 return { skipped: true } } ​ // 只有这个分支使用 userData return processUserData(userData) }

问题是，即使skipProcessing=true，还是会去请求userData。白白浪费时间。

后来改成这样：

async function handleRequest(userId: string, skipProcessing: boolean) { if (skipProcessing) { return { skipped: true } } ​ // 只在需要时才获取数据 const userData = await fetchUserData(userId) return processUserData(userData) }

其实很简单，但之前就是没注意到。

坑 2：大对象别直接用 ref

1000 条商品数据，每条 10+ 个字段，以前直接ref()：

<script setup lang="ts"> import { ref } from 'vue' ​ // 1000 个商品，每个商品 10+ 字段，全部变成响应式 const products = ref<Product[]>([]) ​ async function loadProducts() { products.value = await fetchProducts() // Vue 会递归遍历所有对象，添加响应式代理 } </script>

渲染的时候卡得要命。后来发现应该用
shallowRef：

<script setup lang="ts"> import { shallowRef } from 'vue' ​ // 只有数组本身是响应式的，内部对象保持普通对象 const products = shallowRef<Product[]>([]) ​ async function loadProducts() { // 替换整个数组触发更新，无需深度响应式 products.value = await fetchProducts() } </script>

shallowRef只让数组本身响应式，内部对象保持普通对象。更新时替换整个数组就能触发响应，省了大量性能开销。

几个真实案例（我遇到过的）

案例 1：别对同一个数组循环多次

之前接手一个项目，发现同一个商品列表循环了 5 次：

// 错误：5 次独立遍历 const discounted = products.filter(p => p.discount > 0) const inStock = products.filter(p => p.stock > 0) const featured = products.filter(p => p.featured) const totalValue = products.reduce((sum, p) => sum + p.price, 0) const avgPrice = totalValue / products.length

看着就难受。后来改成一次循环：

// 正确：一次遍历 const stats = products.reduce((acc, product) => { if (product.discount > 0) acc.discounted.push(product) if (product.stock > 0) acc.inStock.push(product) if (product.featured) acc.featured.push(product) acc.totalValue += product.price return acc }, { discounted: [], inStock: [], featured: [], totalValue: 0 }) ​ const avgPrice = stats.totalValue / products.length

商品少的时候看不出来，数据一多性能差距就很明显了。

案例 2：独立的请求不要排队

用户详情页，三个互不依赖的接口，结果在串行调用：

// 错误：串行：总耗时 = 300ms + 200ms + 250ms = 750ms const user = await fetchUser(userId) // 300ms const posts = await fetchUserPosts(userId) // 200ms const comments = await fetchUserComments(userId) // 250ms

改成并行之后：

// 正确：并行：总耗时 = max(300ms, 200ms, 250ms) = 300ms const [user, posts, comments] = await Promise.all([ fetchUser(userId), fetchUserPosts(userId), fetchUserComments(userId) ])

总耗时从 750ms 降到 300ms，页面快了一半多。这种优化投入产出比最高。

案例 3：长列表用 CSS content-visibility​​​​​​​

1000+ 条评论的页面，初始渲染很慢：

<!-- 错误：所有评论立即渲染 --> <div v-for="comment in comments" :key="comment.id"> <CommentCard :comment="comment" /> </div>

后来加上content-visibility：

<!-- 正确：浏览器跳过屏幕外的渲染 --> <div v-for="comment in comments" :key="comment.id" class="comment-item" > <CommentCard :comment="comment" /> </div> <style> .comment-item { content-visibility: auto; contain-intrinsic-size: auto 200px; } </style>

浏览器会跳过屏幕外的渲染，初始加载快了 5-10 倍，滚动也流畅多了。这个 CSS 属性真的好用。

怎么用

直接看

# 克隆仓库 git clone https://github.com/ursazoo/vue-best-practices.git # 安装依赖 npm install # 构建 AGENTS.md npm run build

克隆下来，直接看rules/目录下的规则文件。每个文件都是独立的，包含问题说明、代码示例和解决方案。

也可以看构建好的AGENTS.md，把所有规则整合在一起，方便搜索。

集成到 AI 编码助手

如果你也在用 Claude Code、Cursor 这类 AI 工具写代码，可以集成进去：

npx add-skill vue-best-practices

AI 审查代码的时候，如果发现性能问题（比如请求瀑布流、过度响应式），会参考这些规则给出优化建议。我现在就是这么用的，挺方便。

Vue 2 还是 Vue 3

都支持。每条规则都标注了版本兼容性：

• Vue 2 & 3 通用：基础的性能优化技巧
• Vue 3 Only：用了<script setup>、shallowRef、Suspense等新特性
• Vue 2 Only：针对 Vue 2 的特定优化（比如Object.freeze()）

老项目也能用，新项目能用得更充分。

持续更新~