🧬 前端框架演进史
一句话定性
前端框架的整部历史,是一场**“谁来负责把状态同步到 DOM”的责任转移史**:从开发者手动操作(jQuery),到框架运行时托管(AngularJS/React/Vue),再到编译器在构建期就把活干完(Svelte)。每一代框架的诞生,都是为了埋葬上一代成功背后埋下的那颗”复杂度炸弹”。
一、它是什么 & 出现的时代
“前端框架”本质上是管理 UI 复杂度的工具。它要回答的核心问题永远只有一个:
当数据(state)变化时,界面(DOM)如何正确、高效地跟着变?
围绕这一个问题,前端在 15 年里换了七代答案:
| 世代 | 代表 | 年份 | 核心范式 | 时代 |
|---|---|---|---|---|
| 0 | jQuery | 2006 | 命令式操作 DOM | 2005-2013 Ajax时代 |
| 1 | Backbone | 2010 | MVC,数据驱动视图(手动) | 2005-2013 Ajax时代 |
| 2 | AngularJS | 2010 | 双向数据绑定 + 脏检查 | 2005-2013 Ajax时代 |
| 3 | React | 2013 | 声明式 + 虚拟 DOM + 单向流 | 2013-2018 SPA时代 |
| 4 | Vue | 2014 | 渐进式 + 响应式 + 组件化 | 2013-2018 SPA时代 |
| 5 | Angular-2+ | 2016 | TypeScript 全家桶 + RxJS | 2013-2018 SPA时代 |
| 6 | Svelte | 2016→ | 编译时,无虚拟 DOM | 2018-2023 工程化时代 |
二、为什么会出现(解决上一代什么痛点)
这是理解整部历史的钥匙。每一代都是为了解决上一代的致命副作用:
一条环环相扣的"痛点 → 解药 → 新痛点"链
- jQuery:解决了”DOM API 难用 + 浏览器不兼容”。→ 但命令式操作让大型应用变成意大利面条,状态和视图的手动同步成了 bug 之源。
- Backbone:解决了”代码没结构”,引入 MVC。→ 但 View 跟随 Model 变化的逻辑还得手写,模板绑定不自动。
- AngularJS:解决了”绑定要手写”,发明双向数据绑定,数据变视图自动变。→ 但**脏检查(dirty checking)**在大型应用性能崩溃,且双向绑定让数据流向不可追踪。
- React:解决了”性能 + 数据流混乱”,提出
UI=f(state)+ 虚拟 DOM + 单向数据流。→ 但 JSX/工具链门槛高,虚拟 DOM 有运行时开销,Redux 样板代码冗长。- Vue:解决了”React 心智负担重”,做渐进式 + 自动响应式,易上手。→ 范式上与 React 趋同,新问题更多在生态而非框架本身。
- Angular 2+:解决了”AngularJS 架构过时”,推倒重来拥抱 TS/RxJS,做企业级。→ 不兼容重写造成生态创伤,学习曲线陡峭。
- Svelte:反思”虚拟 DOM 真的必要吗?“,把 diff 工作搬到编译期,运行时近乎裸 JS。→ 编译产物组件多了反而不一定更小,生态规模仍是短板。
三、核心创新 & 为什么流行(踩中什么时代红利)
每一代能赢,都不是因为”技术最先进”,而是因为精准命中了那个时间点最痛的需求:
- jQuery 踩中:Ajax 解锁了富交互,但原生 DOM API 难用且不兼容 —— 它用
$()一把抹平。 - AngularJS 踩中:开发者厌倦了手动同步,双向绑定”数据变 UI 自动变”像魔法 —— 加上 Google 背书。
- React 踩中:ES6-ES2015 让 JS 现代化、V8 性能足够、移动互联网爆发要求复杂应用 ——
UI=f(state)给出了可推理的心智模型。 - Vue 踩中:React 门槛高,大量从 jQuery/PHP 转型的开发者需要平缓的坡道 —— 渐进式 + 中文生态完善(详见 为什么Vue在中国崛起)。
- Angular 2+ 踩中:大企业需要强约束、强类型、长期可维护的”全家桶” —— TypeScript 红利。
- Svelte 踩中:工程化时代对 bundle 体积和运行时开销的反思 —— “编译时优化”成为新共识。
一条暗线:范式的钟摆
从 jQuery(运行时全靠手动)→ React(运行时框架托管)→ Svelte(编译时托管),复杂度在沿着”手动 → 运行时 → 编译时”迁移。框架做得越多,运行时就越重;于是钟摆又荡回”把活提前到编译期做”。这不是循环,而是螺旋上升。
四、带来的新问题 / 副作用
每一次胜利都是下一次危机的种子
五、为什么会衰落 / 现状(仍在用则讲演化)
- jQuery:范式被淘汰,但因海量遗留站点,至今仍是使用率最高的库之一 —— “活着的化石”。
- Backbone:被组件化框架完全取代,基本退出历史舞台,只留下思想遗产。
- AngularJS:2022 年正式停止维护,是”双向绑定 + 脏检查不可扩展”的著名反面教材。
- React:仍是事实标准,正在向 Hooks → Fiber → 并发 → RSC(Server Components) 演化,把战场推回服务端。
- Vue:稳居第二,3.x 用 Proxy 重写响应式 + Composition API,在中国是事实第一。
- Angular 2+:守住企业级阵地,持续迭代(Signals、Standalone Components),不再追求普及率。
- Svelte:小而美,Svelte 5 用 runes 引入显式响应式,SvelteKit 补齐全栈能力。
六、对后续技术的影响(因果链)
命令式 DOM 操作(jQuery)
│ 应用一大 → 意大利面 → 状态/视图同步成灾
↓
渴望"声明式":我只想描述 UI,别让我手动改 DOM
│
├─► Backbone(MVC,手动绑定) ─┐
│ ├─► AngularJS(双向绑定,自动) ─► 脏检查性能崩 ─► 2.0 推倒重来
│ │ │
│ │ ↓
│ │ Angular 2+(TS/RxJS 企业级)
│ │
│ └─► React(UI=f(state) + 虚拟DOM + 单向流) ──► 事实标准
│ │ │
│ ├─► Vue(取两家之长,渐进式) ──► 中国崛起 │
│ │ ├─► Hooks(2019)
│ │ ├─► Fiber/并发
│ │ └─► RSC(回到服务端)
│ │
│ └─► "虚拟DOM真的必要吗?" ──► Svelte(编译时干掉它)
│ └─► Svelte 5 runes
↓
范式钟摆:手动 → 运行时托管 → 编译时托管,螺旋上升
↓
下一站:[[2023-未来 AI时代]] —— 框架会不会被 AI 编程抹平差异?(见 [[AI编程会让前端框架收敛吗]])
历史地位
前端框架史最深刻的教训是:真正的进步从不是”把旧东西做得更好”,而是改变思维范式——从”怎么改 DOM”(命令式)到”UI 应该长什么样”(声明式),从”运行时算”到”编译时算”。每一代框架都在偿还上一代的债,同时为下一代埋下新的债。读懂这条因果链,比记住任何一个框架的 API 都重要。
🔗 相关:jQuery | Backbone | AngularJS | React | Vue | Angular-2+ | Svelte 🔗 时代:2005-2013 Ajax时代 | 2013-2018 SPA时代 | 2018-2023 工程化时代 | 2023-未来 AI时代 🔗 深度:为什么React战胜了AngularJS | 为什么Vue在中国崛起 | AI编程会让前端框架收敛吗 | 渲染模式演进史