为什么做这个
说实话，这个项目是我自己用的。
工作这几年，遇到的性能问题基本都是类似的坑：接口瀑布流
、bundle 越来越大、响应式乱用。每次踩完坑修好了，过段时间换个项目又踩一遍。
后来想着，干脆整理一份文档，自己查方便，也能给 AI 编码助手看（我现在用 Claude Code
），这样审代码的时候能提前发现问题。
整理完发现，好像也可以分享出来，说不定有人也遇到过这些问题。
我踩过的坑
这几年写 Vue 项目（Vue 2
/3 +
Nuxt 都有），踩过不少坑：
接口请求变成瀑布流一个await接一个await，明明能并行的请求硬是串行了。用户抱怨页面慢，一查发现 3 个接口排队等了 750ms。
bundle 体积失控每次加需求就往里塞代码，没人关心打包结果。等到首屏白屏 3 秒了，才发现 JavaScript 已经 300KB+。
响应式系统滥用大对象直接ref()，上千条商品数据，每个字段都变成响应式。渲染一卡一卡的，还以为是组件写得不好。
这些问题不是什么高深的优化，就是基本功。但忙起来就容易忽略，等出问题再改成本就高了。
怎么说呢，优化要分轻重
我发现很多人（包括以前的我）做性能优化会搞错重点。
举个例子：页面有 600ms 的请求等待时间，结果花一周优化computed缓存。首屏加载了 300KB 的 JavaScript，结果去优化循环少跑几次。
其实应该先解决大问题：
- 先干掉请求瀑布流- 能并行就并行，该预加载就预加载
- 再砍 bundle 体积- 代码分割、动态导入、tree-shaking
- 然后才是组件和响应式优化- 减少不必要的渲染
我按这个思路把规则分成了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-practicesAI 审查代码的时候，如果发现性能问题（比如请求瀑布流、过度响应式），会参考这些规则给出优化建议。我现在就是这么用的，挺方便。
Vue 2 还是 Vue 3
都支持。每条规则都标注了版本兼容性：
- Vue 2 & 3 通用：基础的性能优化技巧
- Vue 3 Only：用了
<script setup>、shallowRef、Suspense等新特性 - Vue 2 Only：针对 Vue 2 的特定优化（比如
Object.freeze()）
老项目也能用，新项目能用得更充分。
持续更新~
