如何学 SPA，别总盯着那些 KPI 别再想着把 SPA 当成一个死板的教材背诵 Process 了。

这东西最该学的不是那一套 fancy 的命名约定，而是如何把那些烂大街的框架，变成你手里那把剃须刀。 起初，你得承认 SPA 的可怕之处：它卷。卷到连 React 都认定自己是 SPA 的祖宗。便目前的生态里，Vue、React、Angular、Svelte、Nuxt、NestJS……物种泛滥。你找个坑不填，随意写个 React，就能把整个 SPA 界的门路都搞穿。 但门路穿通了，门道也就来了。真正的高手，哪位写的代码？哪位封装了哪位？实际上看不出来，他们只是把你需求的那些碎片，重新拼凑成了他们自己的风格。

这就是 SPA 的灵魂：灵活性。 你想做 RESTful 的？好，那就别做 SPA 了。你已经是 Vue 了。

你想做 CQRS 的？React 也能知足，就连更能知足。

你想做微服务？Jaeger 能给你答案。

你想做 GraphQL？Apollo 给你方案。 故此，学 SPA 的第一步，就是忘掉“我要学 SPA"这个念头。你要做的，是忘掉“我要学 SPA"这个念头。你只需求记住，代码里的每一个标签，都是你选择的路上的一块拼图。你选了 REST，就顺理成章地学会了 HTTP 协议；你选了 Vue，你就顺理成章地学会了响应式原理和组件化思维。 这就好比你学游泳，你没必要非要考个游泳证去学那种贵得吓人的浮力训练。你只需求拿个卷子，把能划水的地方都找出来，然后在沙滩上随意站待会儿，水没得捞。 看个数据。2023 年各大大厂的海量招聘数据，显示对于前端岗位，哪位的简历写得像 SPA 一样花哨？哪位的技术栈丰富？哪位的架构设计得从容？往往就是那些看似“不务正业”的人。出于真正的技术在 SPA 的世界里是隐形的手，它藏在那些看似花哨的 API 调用中，藏在那些看似复杂的状态管理中，藏在你那些为了兼容性写的 fallback 逻辑里。 比如，你开发一个电商后台。你是用 React 做的，还是用 Vue？ 要是我用 React，我会把数据流设计成这样：首页数据加载成 Router 状态，商品列表作为子组件，用户操作触发 Mutation。

这时候，你可能根本不在乎这层渲染逻辑，你只关心数据能不能取出来。 要是我用 Vue，我会把数据流设计成这样：Data 管理工具，路由管住页面，组件监听变化。

这时候你或许会启动关切 mounted 生命周期，要么 watch 的副功能管理。 实际上，在这两种方案里，底层数据逻辑是一模一样的。路由只是你给数据流定下的规则。你选 Vue，是出于你习惯那个思维；你选 React，是出于你更喜爱那个 Stack Overflow 的梗。 你看那些大厂的架构师，他们是如何拆代码的？ 就说一个典型的电商订单模块。 要是使用 Restful + Vue，你会看到这样的结构： ```javascript // 路由配置 router.get('/api/order/list', ({ store }) => { return store.getState().orders; }); // 组件 ``` 再看一个典型的 Restful + React 版本： ```javascript // 路由配置 import { Router } from 'react-router-dom'; const router = new Router({ history: createHistoryInstance(), routes: [ { path: '/order/list', element: () =>

获取订单列表
} ] }); // 组件 const OrderList = () => { const data = useQuery('/api/order/list'); return (
商品名价格
{data.productName} {data.price}
); }; // 服务层 const fetchOrders = async () => { const res = await api.get('/api/order/list'); return res.data; } ``` 你会发现，代码量一样，逻辑一样。

区别在于，上面的代码让你认定自己在操作一门语言，而下面的代码让你认定自己在搞定一个特定的任务。 这就是 SPA 的魅力。你不需求知道 router 是如何工作的，你只需求知道这个路由需求做啥。你不需求搞懂 props 是如何传递的，你只需求知道这个组件需求传啥数据。 要是你非要问，为啥有的老板喜爱 Vue，有的喜爱 React？ 一个喜爱 Vue 的架构师，可能更看重组件的可复用性，还有那个组件树在内存中该如何张罗。一旦数据变化，他不需求去重启整个应用，只需求在某个地方更新，状态就会自动流转。 一个喜爱 React 的架构师，可能更看重组合的灵活性。把 A 组件放进 B 组件里，C 组件嵌套在 D 组件里，这样就能形成一个复杂的 UI 结构。并且，一旦数据需求持久化，React 的 Context API 就能帮你搞个全局状态，就像个中央数据库。 至于状态管理？ Vue 的 Vuex 是那种“你用了它，它就务必变成你的样子”的东西。一旦你加了 Vuex，你的代码就彻底变成了 Vue 的代码。 React 的 Redux（或 Zustand）是那种“你真要转变全局状态吗？那行吧，你把它改成了 Redux"的东西。一旦你用了它，你的代码就彻底变成了 React 的代码。 学 SPA，你不是在学“如何搭建一个网站”，你是在学“如何在一个快速迭代的工具栈里，保持代码的可读性和扩展性”。 比如，你写个后台管理系统。 要是只用 Vue，你会花大量工夫去写：`import { createPinia } from 'pinia';`；然后写一堆 `pinia.registerStore` 和 `store.commit action` 的代码。 要是只用 React，你会花大量工夫去写：`useStore('store-name')`；然后写一堆 effects 来监听变化，或写 slice 来管理状态。 一旦你切换了技术栈，你连一套“我刚刚写的是 SPA"的逻辑都忘了一半。 故此，学 SPA，就要学会混搭。 你写个页面，用 Vue 实现交互逻辑，用 React 实现数据渲染。你写个 API 调用，用 Axios 写请求，用 Fetch 写响应。你写个计算属性，用 Vue 计算，用 React 计算。 当你把这两套逻辑拼在一起时，你会发现，它们不再是冲突的敌人，而是互相依赖的邻居。 Vue 负责让数据流变得顺滑，React 负责让数据流变得清楚。 这就是 SPA 技术的精髓。它不是要让你成为宏大的架构师，它是要让你成为那个能把宏大的架构，缩放到你眼前这个具体页面里的人。 别去考那些高级的认证了。去写点 CRUD 吧。写点表单吧。写点那种表单验证逻辑，用 Vue 的 `ref` 写一个，用 React 的 `useState` 写一个。别管框架，只管逻辑。 当你写完一段代码，发现它运行得完美，且逻辑清楚时，那就是 SPA 教给你的第一课。 至于赶明儿如何变？ 等你写了充足多的逻辑，你自然就能理解啥是微前端了，啥是组件库了，啥是 Server Components 了。

那些东西，都是你之前写的逻辑，只是换了个容器装/拉倒。 下次你要是再问：“我要学 SPA，如何学？” 你能够直接回怼：“学 SPA，就学如何把那些烂大街的东西，变成你手里那把剃须刀。” 然后，拿起你的代码，启动写。