Vue.js 生态的深水区：一个前大厂人的实战复盘

去年双11刚过完，我就把电脑一合，提了离职。不是因为阿里或网易干不下去——事实上两边 offer 都还在桌上——而是连续三年搞“大促保障”，凌晨三点盯着 Grafana 看 QPS 曲线，真的有点心力交瘁。现在在家躺平三个月，一边研究开源项目源码（最近在啃 Vue 3 的响应式系统），一边琢磨下一站去哪儿。杭州这边机会是真多，但选技术栈也得擦亮眼。

今天想和大家聊聊 Vue.js 生态。别误会，我不是要吹 Vue 多牛，也不是踩 React。毕竟在大厂待久了，React + Spring Boot 的组合我也写过不少，甚至一度觉得“函数式 + hooks 才是正道”。但最近帮朋友重构一个后台管理系统，重新深入 Vue 3 + Vite + Pinia 的全家桶，才发现这生态已经卷到让人刮目相看了。

为什么又回头用 Vue？

事情起因很简单：朋友公司有个老后台，Vue 2 + Webpack 4，打包一次三分钟，HMR 基本失效，改个按钮颜色都得等半分钟。产品经理急着上线新功能，开发团队快被 deadline 逼疯。他们原本打算直接切 React + Vite，但我劝住了：“不如试试 Vue 3 + Vite 迁移？成本可能比你想象的低。”

我这么说是有底气的。在阿里那会儿，我们团队就做过类似迁移。虽然主站前端是 React，但一些中后台项目用 Vue 写反而更快——尤其当后端是 Java Spring Boot 时，前后端联调节奏天然契合。Spring Boot 启动快、接口稳，前端要是再搞个重型框架，纯属自找麻烦。

技术选型：Vue vs React，真没那么玄学

很多人一聊框架就上纲上线，仿佛选错一步人生尽毁。其实真没那么严重。我列了个简单对比表，结合自己踩过的坑：

维度	Vue 3 (Composition API)	React (Hooks)
学习曲线	温和，模板语法对新人友好	较陡，JSX + 函数式思维门槛高
状态管理	Pinia 轻量、TypeScript 友好	Redux Toolkit 或 Zustand
构建速度	Vite 极快（ESM 原生支持）	Vite 也快，但生态更碎片化
TypeScript 支持	官方深度集成，类型推导自然	需额外配置，泛型容易绕晕
社区生态	国内强，Element Plus/Naive UI 成熟	全球广，但 UI 库选择太多易纠结
性能优化	模板编译时优化，无需手动 memo	依赖 useMemo/useCallback，易忘

举个真实例子：我们之前有个表格组件，数据量 5000+ 行。用 React 写，稍不注意就会全量 re-render，得手动加 React.memo + useMemo，代码啰嗦还容易漏。换成 Vue 3 后，得益于模板的静态提升（hoisting）和 block diff，性能直接达标，几乎不用动刀。

当然，React 在复杂交互场景（比如富文本编辑器、可视化画布）确实更灵活。但如果你做的就是 CRUD 后台、数据看板、运营配置页——别硬上 React 了，Vue 的开发体验真的香。

实战：从 Vue 2 到 Vue 3 + Vite 的血泪迁移

回到朋友那个项目。原项目是 Vue 2 + Vuex + Vue CLI。目标：Vue 3 + Pinia + Vite + TypeScript。

第一步：脚手架重搭
直接 npm create vue@latest，一路回车。Vite 的 dev server 启动速度让我惊了——800ms 内搞定，Webpack 时代简直活在石器时代。

第二步：状态管理换 Pinia
Vuex 的 modules 嵌套太深，类型提示像薛定谔的猫。Pinia 简直是救星：

// stores/user.ts
import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    name: '',
    avatar: ''
  }),
  actions: {
    async login(credentials) {
      const res = await api.post('/auth/login', credentials)
      this.name = res.data.name
    }
  }
})

配合 Vue 3 的 <script setup>，组件里直接 const userStore = useUserStore()，TypeScript 自动推导类型，连 JSDoc 都省了。

第三步：性能优化实战
最头疼的是那个“万级节点树形控件”。以前每次展开节点都卡成 PPT。这次用了两个技巧：

1. 虚拟滚动：vue-virtual-scroller 上手即用，5000 条数据丝滑如德芙。
2. 懒加载子树：点击才请求子节点，配合 v-memo（Vue 3.2+ 新特性）避免重复渲染。

<template>
  <div v-for="item in visibleItems" :key="item.id" v-memo="[item.status]">
    {{ item.name }}
  </div>
</template>

v-memo 类似 React 的 memo，但写在模板里，心智负担小得多。

和 Spring Boot 联调的那些事

说到后端，朋友公司用的是 Spring Boot 2.7。这里有个小 tip：前端代理配置别偷懒。

以前在网易，测试环境经常跨域，本地开发得配 proxy。Vite 的配置比 Webpack 简洁太多：

// vite.config.ts
export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

这样前端请求 /api/user，自动转发到 Spring Boot 的 localhost:8080/user。再也不用求后端同事开 CORS 了（运维大哥们，你们懂的）。

另外，Spring Boot 的 Actuator + Vue 的 Axios 拦截器组合，做统一错误处理特别舒服。比如 401 自动跳登录页，500 弹 toast 提示，一套逻辑走天下。

最后的碎碎念

写这篇技术分享，其实是想打破一个误区：框架之争毫无意义，解决问题才是王道。

我在阿里那会儿，团队里既有 React 死忠粉，也有 Vue 老炮。最后怎么分工？看业务！交易链路用 React（生态工具链成熟），内部工具用 Vue（开发快、维护省心）。技术 leader 说得特别实在：“用户不关心你用什么框架，只关心页面能不能秒开。”

现在辞职在家，反而看得更清了。Vue 3 的生态已经非常成熟，尤其在国内。Vite 让构建不再是瓶颈，Pinia 让状态管理回归简洁，加上 Composition API 的逻辑复用能力，完全能扛起中大型项目。

所以，别再问“该学 Vue 还是 React”了。先搞清楚你的战场在哪。如果是杭州这片地，阿里网易腾讯的外包岗、SaaS 创业公司、跨境电商后台——Vue 生态绝对够用，甚至更高效。

对了，最近在 GitHub 上挖到一个超赞的开源项目：naive-ui，作者是字节的哥们，TypeScript 写得飞起，组件性能优化细节拉满。感兴趣的朋友可以一起读读源码，我建了个小群，欢迎来唠（文末留言哈）。

技术这条路，没有银弹，只有合适。希望我的踩坑经验，能帮你少熬几个夜，多陪陪家人。毕竟，代码跑得再快，也快不过人生下半场。

---

P.S. 上周五晚上，终于把朋友的项目上线了。产品经理请我喝了杯瑞幸，说“下次还找你”。那一刻，突然觉得——或许我不需要急着回去上班？