前端框架对比¶

基于 Web Components 的组件开发路线，见 Lit 框架简介与跨框架组件设计。

不采用大型客户端 UI 框架时的实现与取舍，见 Web 原生开发路线与选型。

框架全景¶

前端框架
├── 元框架 (Meta Framework)
│   ├── Next.js (React)
│   ├── Nuxt (Vue)
│   ├── SvelteKit (Svelte)
│   ├── Angular (Angular)
│   └── Remix (React)
├── UI 框架
│   ├── React
│   ├── Vue
│   ├── Svelte
│   ├── Angular
│   └── SolidJS
└── 跨平台
    ├── React Native
    ├── Flutter
    └── Tauri

核心 UI 框架¶

React¶

核心理念： - 组件化：一切皆组件 - 单向数据流：Props 向下，Events 向上 - 声明式：描述 "是什么"，不是 "怎么做"

代码示例：

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(c => c + 1)}>
      Count: {count}
    </button>
  );
}

Vue¶

核心理念： - 渐进式：可以从 CDN 引入，也可以用完整构建工具链 - 双向数据流：v-model 简化表单绑定 - 组合式 API：Vue 3 Composition API 对标 React Hooks

代码示例：

<script setup>
import { ref } from 'vue';
const count = ref(0);
</script>

<template>
  <button @click="count++">Count: {{ count }}</button>
</template>

Svelte¶

核心理念： - 编译时框架：构建时将组件编译为原生 DOM 操作 - 运行时较轻：不使用虚拟 DOM diff，但编译产物仍包含更新 DOM 所需的运行时代码 - 编译优先：更多框架工作在构建阶段完成，而不是“完全没有框架代码”

代码示例：

<script>
  let count = $state(0);
</script>

<button onclick={() => count++}>Count: {count}</button>

Angular¶

核心理念： - 全家桶：框架内置路由、表单、HTTP、测试 - 依赖注入：一等公民 - TypeScript 优先：类型安全是强制的

代码示例：

@Component({
  selector: 'app-counter',
  template: `<button (click)="count++">Count: {{ count }}</button>`
})
export class CounterComponent {
  count = 0;
}

SolidJS¶

核心理念： - React 语法 + 真实 DOM：像 React 写，但不走 diff - 细粒度更新：信号（Signal）级别的精确更新 - 无重渲染：组件函数只执行一次

元框架 (Meta Framework)¶

选型建议： - React 生态 → Next.js（最大、最多部署支持） - Vue 生态 → Nuxt（Vue 官方推荐） - 追求性能 → SvelteKit（编译时优势） - 侧重服务端逻辑 → Remix（Web 标准优先）

状态管理方案¶

React 生态¶

Vue 生态¶

Svelte 生态¶

CSS 方案¶

选型建议： - 新项目 → Tailwind CSS（行业标准、生态最全） - 需要类型安全 → Panda CSS 或 Vanilla Extract - 追求极致性能 → UnoCSS（引擎级，比 Tailwind 快）

性能比较注意事项¶

框架体积和渲染性能不能用一个固定数字或总排名表示。结果会随框架版本、编译模式、路由和水合策略、应用代码以及测量设备改变。选型时应使用同一业务场景的生产构建，分别测量首屏 JavaScript、LCP、INP、内存占用和服务端成本；公开微基准只能作为线索，不能替代项目级测试。

选型决策¶

场景？
├── 已有 React 经验 → Next.js（元框架）+ Zustand + Tailwind
├── 已有 Vue 经验 → Nuxt（元框架）+ Pinia + Tailwind
├── 追求极致性能 → SvelteKit + Tailwind
├── 企业级大型应用 → Angular + NgRx + Angular Material
├── 跨平台移动 → React Native 或 Flutter
├── 不确定 → Next.js（生态最大、招聘最容易）
└── 个人项目 → SvelteKit（开发体验最好）

按团队规模¶

新兴趋势¶

1. Server Components：Next.js App Router、React Server Components 将渲染推向服务端，减少客户端 JS
2. Signals：Angular 19+ Signals、Svelte 5 Runes、SolidJS Signals — 细粒度响应式成为主流
3. 编译时优化：Svelte、SolidJS 证明编译时可以大幅减少运行时开销
4. 边缘优先：Cloudflare Workers、Vercel Edge 让 SSR 推到 CDN 边缘
5. AI 辅助开发：v0.dev (Vercel)、Bolt.new 等 AI 生成 UI 工具兴起

参考资料¶

• React 官方文档
• Vue 官方文档
• Svelte 官方文档
• Angular 官方文档
• Next.js 官方文档
• Nuxt 官方文档
• SvelteKit 官方文档