一、前端框架概述：为什么需要前端框架？

1.1 我们真的需要框架吗？

说实话，我刚入行那会儿，也觉得框架是个累赘。用原生 JavaScript 写页面，不也挺好的吗？

直到我接手了一个中型项目——一个后台管理系统。页面大概有 30 多个，数据交互频繁，状态管理复杂。我用 jQuery 写了两个月，代码量直奔 8000 行。嗯，后来维护的时候，我自己都看不懂自己写的代码了。

为什么会这样？说白了，原生开发有几个硬伤：

  • DOM 操作太散乱——你改一个数据，得手动去找对应的 DOM 节点，再更新。数据一变，DOM 没跟上，bug 就来了。
  • 状态管理靠全局变量——项目大了以后，全局变量满天飞。你改了一个值，另一个模块崩了，排查起来想砸电脑。
  • 代码复用性差——写了个弹窗组件，换个页面想用，得复制粘贴再改一堆。维护成本直线上升。

核心结论：框架解决的不是「能不能写」的问题，而是「能不能写好、能不能维护」的问题。

我个人习惯把框架理解为「一套约定好的开发范式」。它帮你管好 DOM、管好数据、管好组件。你只需要关注业务逻辑，剩下的脏活累活，框架替你干了。

1.2 前端框架的发展历程

这条路我算是亲眼看着走过来的。从 jQuery 到三大框架，其实就解决了一个核心问题：如何高效地管理 UI 与数据的关系。

第一阶段：jQuery 时代（2006-2014）

jQuery 当年有多火？这么说吧，十个前端九个用。它最大的贡献是统一了 DOM API，解决了浏览器兼容问题。

但 jQuery 本质上还是「命令式编程」。你要告诉浏览器每一步怎么做：

// jQuery 写法：手动操作 DOM
$('#btn').click(function() {
  let count = parseInt($('#count').text());
  $('#count').text(count + 1);
});

这种写法在小项目里没问题。但项目一复杂，代码就成了「面条式」的——数据和视图混在一起，改一处牵全身。

第二阶段：MVC/MVVM 框架兴起（2010-2016）

这时候 AngularJS 和 Backbone 出现了。它们带来了一个关键概念：数据驱动视图。

你不需要手动操作 DOM 了。你只需要改数据，框架自动帮你更新视图。这个思路在当时是革命性的。

// AngularJS 写法：数据驱动
$scope.count = 0;
$scope.increment = function() {
  $scope.count++;
};
// 视图自动更新，不用管 DOM

我记得第一次用 AngularJS 时，感觉像打开了新世界的大门。但后来也踩了不少坑——双向绑定在复杂场景下性能堪忧，脏检查机制让人又爱又恨。

第三阶段：React/Vue/Angular 三足鼎立（2014-至今）

2013 年 React 开源，2014 年 Vue 诞生，Angular 也重构成了 Angular 2。三大框架的格局基本定了。

它们的核心思想其实一致：组件化 + 声明式渲染。但实现方式各有千秋。

一个小建议：初学者别贪多。先精通一个框架，再触类旁通。我见过太多人「三天 React，两天 Vue」，最后哪个都没学透。

1.3 三大框架的市场现状与生态对比

先看一组数据（2024 年统计）：

维度 React Vue Angular
GitHub Stars 220k+ 200k+ 95k+
npm 下载量/周 4500 万+ 3500 万+ 800 万+
学习曲线 中等（需理解 JSX） 低（模板语法友好） 高（TypeScript + 依赖注入）
适用场景 大型 SPA、移动端（React Native） 中小型项目、快速原型 企业级应用、大型团队
状态管理 Redux / Zustand / MobX Pinia / Vuex RxJS + NgRx
路由方案 React Router Vue Router Angular Router（内置）

React：灵活但需要自己做决策

React 本质上只是一个「视图层库」。它只负责渲染 UI，路由、状态管理、HTTP 请求这些都得你自己选。

好处是灵活，坏处是选择太多。我刚用 React 时，光选状态管理工具就纠结了一周——Redux、MobX、Zustand，到底用哪个？

// React 组件示例
function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>计数：{count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

Vue：上手快，适合中小团队

Vue 的设计哲学是「渐进式」。你可以只用它做视图层，也可以搭配全家桶做大型应用。

它的模板语法对后端转前端的开发者特别友好。我有个同事，之前写 Java 的，学 Vue 只花了两天就能上手干活了。

<!-- Vue 组件示例 -->
<template>
  <div>
    <p>计数：{{ count }}</p>
    <button @click="count++">+1</button>
  </div>
</template>

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

避坑指南：我曾经在一个项目中过度依赖 Vue 的「便利性」，把所有逻辑都塞进了模板表达式里。结果模板变得又长又难调试。记住：模板只做展示，逻辑放 script 里。

Angular：大而全，适合企业级

Angular 是一个「完整框架」。路由、HTTP、表单验证、依赖注入，全都内置好了。你不需要纠结选什么库，开箱即用。

但代价是学习曲线陡峭。TypeScript、装饰器、RxJS、依赖注入，这些概念对新手来说确实有点劝退。

// Angular 组件示例
@Component({
  selector: 'app-counter',
  template: `
    <p>计数：{{ count }}</p>
    <button (click)="increment()">+1</button>
  `
})
export class CounterComponent {
  count = 0;
  increment() {
    this.count++;
  }
}

1.4 怎么选？我的建议

这个问题没有标准答案。但我可以分享一些经验：

  • 个人项目或小团队：选 Vue。上手快，文档好，开发效率高。
  • 大型商业项目：选 React。生态丰富，社区活跃，遇到问题容易找到解决方案。
  • 企业级应用，团队规模大：选 Angular。规范统一，适合多人协作。
  • 如果你在找工作：看看你目标公司的技术栈。国内 Vue 和 React 五五开，Angular 偏少但薪资普遍较高。

最后说一句：框架只是工具，不是目的。别为了用框架而用框架。如果你的项目只是一个简单的落地页，用原生 JS 或者 jQuery 完全没问题。我见过太多「杀鸡用牛刀」的项目了——一个展示型网站，硬上了 React + Redux，结果维护成本比开发成本还高。

好了，第一章就聊到这儿。下一章我们深入讲讲 React 的核心概念——虚拟 DOM 和 JSX。到时候我会分享一些我在实际项目中踩过的坑，保证让你少走弯路。

← 上一章 📖 返回目录 下一章 →