Vue3 性能优化：我在每个项目中都会用的 3 个技巧（附源码解析）
别再只做"API 工程师"了，让我们深入源码，看看这些优化背后的原理。
作为一名前端老兵，我见过太多因为性能问题而被用户抛弃的应用。最夸张的一次，一个简单的后台管理系统首屏加载居然要 8 秒！老板直接拍桌子问我是不是在用 56K 拨号上网。那次经历让我深刻意识到，性能优化不是锦上添花，而是生死攸关。
说实话，很多所谓的"性能优化"文章都在扯淡。什么 WebAssembly、Service Worker，听起来高大上，但对于 90% 的业务项目来说根本用不上。我就想知道，如果不把代码重写一遍，怎么能让页面快一点？哪怕快 100ms 也行啊！
1. 路由组件懒加载 (Lazy Loading)
这是最简单也最有效的优化手段。如果你的应用把所有页面都打包进一个 JS 文件，那首屏加载肯定慢。Vue Router 支持动态导入，只需要一行代码，就能把每个页面的代码拆分出去，用户访问时再加载。
// 优化前
import UserProfile from './UserProfile.vue'
// 优化后
const UserProfile = () => import('./UserProfile.vue')
const routes = [
{ path: '/user/:id', component: UserProfile }
]
源码揭秘：defineAsyncComponent
在 Vue 3 的源码中，这种动态导入实际上是由 defineAsyncComponent 处理的。当你提供一个返回 Promise 的函数时，Vue 会创建一个特殊的"异步占位符"节点。
渲染器在遇到这个节点时，不会立即渲染子组件，而是等待 Promise resolve。在等待期间，它可以渲染一个 Loading 组件（如果有配置）。这种机制利用了 Bundler（如 Vite/Webpack）的代码分割能力，将不同的路由组件切分成独立的 chunk，从而实现"按需加载"。
2. 长列表虚拟滚动 (Virtual Scrolling)
当你需要渲染几千条数据时（比如聊天记录、商品列表），直接 v-for 渲染会让浏览器卡死。虚拟滚动的原理是只渲染可视区域内的 DOM 节点，无论数据有多少，页面都丝滑顺畅。
源码揭秘：Diff 算法的开销
为什么长列表会卡？不仅仅是 DOM 节点多，更重要的是 Vue 的 Diff 算法 开销。
在源码的 patchKeyedChildren 函数中，Vue 需要遍历新旧 VNode 列表进行比对。如果列表有 10000 项，哪怕数据只变了一条，Diff 算法也需要遍历这 10000 个节点来确定移动、新增或删除的操作。虚拟滚动直接将 VNode 的数量从 10000 减少到了 20（可视区域数量），从根本上降低了 Diff 算法的 CPU 消耗。
3. 巧用 shallowRef 处理大数据
这是很多中高级开发者容易忽略的点。如果你的组件需要加载一个巨大的只读数据列表（比如一个 5MB 的 JSON 地图数据），千万不要直接用 ref() 或 reactive()。
// ❌ 性能杀手：Vue 会递归把 bigData 里的每一层属性都变成 Proxy const data = ref(bigData) // ✅ 性能救星：只监听 .value 的变化，不代理内部属性 const data = shallowRef(bigData)
源码揭秘：Proxy 的递归代理
Vue 3 的响应式是基于 Proxy 实现的。当你调用 reactive(obj) 时，源码会检查 obj 的所有属性。如果属性也是对象，Vue 会递归调用 reactive 将其也转换为 Proxy。
对于一个深层嵌套的大对象，这个初始化过程非常耗时。而 shallowRef 在源码中创建的是一个"浅层 Ref"，它不会对 .value 内部的对象进行 reactive 转换。这意味着访问 data.value.deep.prop 时，你操作的是原生对象，完全跳过了 Vue 的依赖收集（track）和触发更新（trigger）系统，性能提升巨大。
优化无止境
性能优化是一个持续的过程，不要指望毕其功于一役。先用 Lighthouse 跑个分，找到瓶颈，再对症下药。如果你对图片优化感兴趣，可以试试 OneKit 的 图片压缩工具，它能帮你把图片体积压缩到极致。