Appearance
前端框架全景：从 jQuery 到 React / Vue 生态
最后更新：2026-08-19
本主题要回答的问题
- 什么是"前端框架"？jQuery 算不算框架？
- 前后端不分离时代有哪些"框架"？它们与现代框架的差距在哪？
- React / Vue / Angular / Svelte 各家族内部是怎么长成一棵生态树的？
- 2026 年选框架，到底按什么维度决策？
本文是前端技术与架构总纲的"框架谱系"分册，按时代逐个论述主流框架；架构模式与底层原理见 MVC/MVVM、虚拟 DOM 与响应式。
一、框架谱系总览
前端 30 年，真正算得上"框架"的分为四代：
二、前后端不分离时代的"框架"：jQuery 与模板引擎
在服务端渲染时代，页面由服务器拼好，浏览器端 JS 只做点缀——那时的"前端框架"有两类：
1. jQuery（2006）：统治十年的 DOM 工具库
| 能力 | 解决的问题 |
|---|---|
$() 选择器 | 统一各浏览器 DOM 查询写法 |
| 链式 API + 动画 | 一行搞定元素操作与动效 |
$.ajax() | 把异步请求封装成一行（AJAX 时代的最大功臣） |
| 插件生态 | 数千插件覆盖轮播、弹窗、表单 |
js
// jQuery 时代的标准写法
$('#btn').on('click', function () {
$.ajax({ url: '/api/xxx' }).done(function (data) {
$('#list').append(renderItem(data)); // 手动拼 DOM
});
});jQuery 算不算框架？ 严格说它是工具库而非框架：它不给架构约束（没有组件、状态、生命周期），只是把"操作 DOM"变得顺手。它的统治史也证明了：当页面复杂到一定程度，"方便操作 DOM"不如"让开发者少操作 DOM"——这正是三代框架的机会。
2. 服务端模板引擎（Smarty / Jinja2 / Thymeleaf）
| 引擎 | 语言阵营 | 特点 |
|---|---|---|
| Smarty | PHP | 早期 PHP 混写时代的视图层 |
| Jinja2 | Python (Django/Flask) | 模板继承、过滤器，至今活跃 |
| Thymeleaf | Java (Spring) | 天然 HTML，可静态打开再服务端渲染 |
它们的职责是"服务端拼 HTML"：数据由后端注入，模板只描述视图。它们属于服务端渲染时代的框架，与现代"前端框架"是两条不同赛道。
3. 为什么不分离时代的"框架"扛不住 SPA
| 对比 | jQuery + 模板引擎 | 现代组件化框架 |
|---|---|---|
| 状态管理 | 无，手动同步 | 响应式/单向数据流 |
| 组件化 | 无（代码复用靠函数/插件） | 一等公民 |
| UI 更新 | 命令式改 DOM | 声明式，框架算 diff |
| 数据流 | 随处可改 | 可预测、可追踪 |
结论：不分离时代没有"现代意义的前端框架"——因为页面复杂度还不需要。SPA 时代到来后（见 AJAX 与前后端分离），第一批 MV* 框架应运而生。
三、二代：前后端分离初期的 MV* 框架（2010-2014）
这批框架是"从无到有"的拓荒者，各自的贡献被三代框架吸收：
| 框架 | 年份 | 核心思想 | 代表作/影响 |
|---|---|---|---|
| Backbone.js | 2010 | Model/View/Router 分层，事件驱动 | 服务端 MVC 思想首次入前端 |
| Knockout.js | 2010 | 最早的前端 MVVM 双向绑定 | "数据一变视图自动变"的启蒙 |
| AngularJS | 2010 | 双向绑定 + 依赖注入 + 指令 | MVVM 集大成者，SPA 里程碑 |
| Ember.js | 2011 | 约定优于配置，全家桶 | 大型应用框架的雏形 |
AngularJS 的教训：双向绑定 + 脏检查在复杂应用下性能失控（watcher 过多、作用域难排查），"一页堆几个 controller 就乱"——这为 React 的"单向数据流 + 小而专"路线埋下伏笔。
四、React 家族（2013 - 至今）
1. React 本体：组件化 + 虚拟 DOM + 单向数据流
| 特性 | 说明 |
|---|---|
| 组件化 | UI 拆成函数/类组件，Props 向下、事件向上 |
| 虚拟 DOM | diff 后最小化更新真实 DOM |
| 单向数据流 | 状态从顶层流向叶子，可预测 |
| JSX | JS 里写 HTML 语法糖 |
| Hooks（2019） | 函数组件内管理状态/副作用，取代类组件 |
jsx
// 现代 React：函数组件 + Hooks
function Counter() {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(count + 1)}>{count}</button>;
}2. React 生态树
| 成员 | 定位 |
|---|---|
| Redux / Zustand | 全局状态管理（Zustand 更轻、更现代） |
| Next.js | 全栈元框架：SSR/SSG/RSC，React 事实标准 |
| Remix | 以 Web 标准为中心的元框架（被 Shopify 收购） |
| React Native | 用 React 写原生移动应用 |
| Tailwind CSS | 原子化 CSS 方案（独立于 React，但绑定很深） |
React 的哲学：内核极小、生态自由、渐进采用——"组件是你的，其他自己选"。
五、Vue 家族（2014 - 至今）
1. Vue 2 → Vue 3：渐进式框架的两次进化
| 对比 | Vue 2 | Vue 3 |
|---|---|---|
| API 风格 | 选项式（options） | 组合式（Composition）+ 兼容选项式 |
| 响应式 | Object.defineProperty（有缺陷：无法监听新增属性） | Proxy（完整拦截） |
| 类型 | JS + 弱 TS 支持 | 一等 TypeScript 支持 |
| 构建 | 自选打包器 | 默认 Vite |
| 性能 | 组件级重渲染 | 细粒度更新 + 编译期优化（更快更省） |
vue
<!-- Vue 3 组合式 API -->
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>
<template>
<button @click="count++">{{ count }}</button>
</template>2. Vue 生态树
| 成员 | 定位 |
|---|---|
| Pinia | Vue 官方状态管理（Vuex 的继承者） |
| Nuxt | Vue 全栈元框架（类似 Next.js 之于 React） |
| VitePress / VuePress | 文档站 SSG——本站就在用 VitePress，见 VitePress 专篇 |
| Vite | 构建工具，也是 Vue 官方默认选择 |
Vue 的哲学：渐进式（能当 jQuery 用，也能当全家桶用）、低门槛、中文社区强——"想轻就轻，想重就重"。
六、Angular 家族（2016 重写后至今）
| 对比 | AngularJS（Angular 1） | Angular 2+ |
|---|---|---|
| 语言 | JavaScript | TypeScript（强制） |
| 架构 | 双向绑定 + 指令 | 模块化 + 组件 + 依赖注入 + RxJS |
| 渲染 | 脏检查 | Zone.js 变更检测 |
| 形态 | 轻量脚本库 | 重量级完整框架（自带路由/HTTP/表单/CLI） |
| 优点 | 缺点 |
|---|---|
| 开箱即用、约定统一、适合大企业 | 学习曲线陡（TS+RxJS+DI 三座山） |
| 长期版本支持（Google 主导） | 包体积大、初始成本高 |
| 强类型下大型项目可维护性强 | 社区热度相对低于 React/Vue |
七、四代：新一代框架与"回归派"（2019 - 至今）
| 框架 | 年份 | 核心理念 | 一句话 |
|---|---|---|---|
| Svelte | 2016/2019 | 编译期把声明式代码转成命令式 DOM | "没有虚拟 DOM 的框架"，运行时开销趋零 |
| Solid | 2020 | 细粒度响应式 + 编译期优化 | React 的写法 + Vue 的粒度，无虚拟 DOM |
| Preact | 2015 | React API 的 3KB 实现 | 兼容 React 生态的超轻替代 |
| htmx | 2020 | 用 HTML 属性直接触发服务端请求 | "回归服务端渲染派"，少写 JS |
| Alpine.js | 2019 | 类 Vue 语法的轻量交互库 | "给静态页加点交互"，替代 jQuery 场景 |
| lit / Web Components | 2018+ | 浏览器原生组件标准 | 框架无关，自定义元素 + Shadow DOM |
两条新路线的本质：三代框架把"状态同步"交给运行时（虚拟 DOM/响应式），四代则发现——要么把这件事挪到编译期做掉（Svelte/Solid），要么干脆承认很多页面不需要前端框架（htmx 回归 SSR）。这与演进总纲"渲染位置摆动"的规律一致：复杂度又被重新分配。
八、框架对比总表
| 维度 | React | Vue | Angular | Svelte | Solid |
|---|---|---|---|---|---|
| 编程模型 | 函数组件 + Hooks | 组合式 API | 类 + 装饰器 | 类 Vue 语法 | 类 React |
| 渲染机制 | 虚拟 DOM | 响应式 + 虚拟 DOM | Zone.js 变更检测 | 编译期命令式 | 细粒度响应式 |
| 体积 | 中 | 中 | 大 | 小 | 小 |
| 学习曲线 | 中（生态要自己拼） | 低（渐进式） | 陡（全家桶+TS+RxJS） | 低 | 中 |
| 生态 | 最大 | 大 | 中（企业级） | 成长中 | 成长中 |
| 典型场景 | 中大型 SPA/全栈 | 中小型到大型通用 | 大型企业级 | 追求体积与性能 | 追求性能 |
| 中文社区 | 大 | 最大 | 中 | 小 | 小 |
九、选型决策框架
| 场景 | 推荐 | 理由 |
|---|---|---|
| 文档站/博客 | VitePress / Astro | SSG + 内容站最优 |
| 需要 SEO 的全栈应用 | Next.js / Nuxt | SSR/SSG 成熟 |
| 团队是 Vue 背景 | Vue 3 + Vite | 低门槛、生态自足 |
| 团队是 React 背景 | React + Next.js | 生态最大、招聘容易 |
| 小体量高要求性能 | Svelte / Solid | 体积小、运行时轻 |
| 大型企业内网系统 | Angular | 全家桶约束、长期维护 |
一句话总结
前端框架的谱系就是一部"复杂度归属权"的转移史：jQuery 把"操作 DOM"变简单，Backbone/AngularJS 第一次引入架构，React/Vue 用组件化与数据驱动统一了 SPA，而 Svelte/htmx 这代则开始质疑"是否值得把复杂度交给前端运行时"——选框架不是选"最好的"，而是选"复杂度放在哪里你能承受"的：要全栈选元框架、要性能选编译期派、要企业约束选 Angular、要轻量回归选 htmx/Alpine。