做前端开发这些年，我用过不少框架。从最早的jQuery，到后来的Vue、React、Angular，再到最近的Svelte、SolidJS，每个框架都深度用过，也在实际项目中踩过不少坑。

经常有人问我："前端框架怎么选？Vue和React哪个好？Angular是不是过时了？"今天就从实战角度，对比主流前端框架，分享我这些年踩过的坑和总结的经验。

本文不做参数式的对比，而是结合实际项目经验，说说每个框架的优点、缺点、适合的场景，以及我踩过的坑。希望能帮你在选框架时少走弯路。

一、先说说我的经历

我做前端开发六年了，用过的框架和项目大概是这样的：

  • jQuery：刚入行的时候用，做过几个企业官网和后台管理系统
  • Vue 2：2017年开始用，做过电商后台、SaaS平台、移动端H5
  • React：2019年开始用，做过中后台系统、数据可视化、小程序
  • Angular：2020年在一个国企项目中用过，做企业级中后台
  • Svelte：2021年业余时间学过，做过几个小项目

这些项目有大有小，有个人项目也有团队项目，有成功的也有失败的。下面的对比，都是基于这些真实经历。

二、Vue：上手快，生态全，但也有坑

Vue是我用得最多的框架，也是感情最深的。

优点：

1. 上手快

Vue的学习曲线很平缓。有HTML、CSS、JS基础的人，看一周文档就能上手做项目。模板语法和原生HTML很像，指令（v-if、v-for、v-model）直观易懂。

我带过几个新手，用Vue一周就能独立开发页面，用React可能要两周。对小团队和新手友好，这是Vue最大的优势。

2. 单文件组件（SFC）

Vue的单文件组件（.vue文件）把模板、脚本、样式写在一个文件里，结构清晰，开发体验好。配合VS Code的Volar插件，提示和跳转都很方便。

3. 生态完善

Vue的生态很完善，官方提供了Vue Router、Pinia（Vuex）、Vue CLI/Vite，UI组件库有Element Plus、Ant Design Vue、Vant等。做中后台和移动端，基本不用自己造轮子。

4. 国内社区活跃

Vue在国内非常流行，中文文档、教程、问题解答都很多。遇到问题，搜一下基本都能找到答案。

我踩过的坑：

坑一：Vue 2的响应式限制

Vue 2用Object.defineProperty做响应式，有一些限制：不能检测对象属性的添加和删除，不能检测数组索引的修改。虽然有Vue.set和this.$set，但用起来还是不方便，新手经常踩坑。

比如：

this.obj.newProp = 'value'  // 不响应！
this.arr[0] = 'new'         // 不响应！

必须用：

this.$set(this.obj, 'newProp', 'value')
this.$set(this.arr, 0, 'new')

Vue 3用Proxy解决了这个问题，但Vue 2的项目还很多，这个坑很多人都踩过。

坑二：Vuex的繁琐

Vue 2官方推荐的状态管理是Vuex，但Vuex用起来很繁琐。定义一个状态，要写state、getters、mutations、actions，还要分模块。简单的状态管理，用Vuex就是杀鸡用牛刀。

而且mutations必须是同步的，异步逻辑要写在actions里，然后actions提交mutations，绕来绕去，代码量大。

现在Vue 3推荐用Pinia，比Vuex简洁很多，但老项目还在用Vuex，迁移成本不小。

坑三：第三方组件库的质量参差不齐

Vue的UI组件库很多，但质量参差不齐。Element UI（Vue 2版）bug不少，文档也不够详细。有些组件库更新慢，不兼容Vue 3。

我在一个项目中用了一个不太知名的组件库，后来发现有严重bug，作者不维护了，只能自己改源码，很痛苦。

坑四：Vue 3的迁移成本

Vue 3虽然好，但从Vue 2迁移成本不低。Composition API是新的写法，老项目的Options API要重写。很多第三方库还没适配Vue 3，迁移的时候会遇到兼容性问题。

我有一个Vue 2的老项目，想升级Vue 3，评估了一下，要改的地方太多，最后放弃了，继续用Vue 2。

适合场景：

  • 中后台管理系统
  • 移动端H5和小程序
  • 小团队和新手项目
  • 快速原型开发

三、React：灵活强大，但学习曲线陡

React是我第二常用的框架，用了三年多。

优点：

1. 灵活，什么都能做

React的核心很简单，就是一个UI库。但围绕React的生态非常丰富，几乎什么都能做：Web、移动端（React Native）、桌面端（Electron）、SSR（Next.js）、甚至3D（React Three Fiber）。

而且React不限制你的代码组织方式，你可以用函数组件、类组件，可以用Hooks、HOC、render props，怎么灵活怎么来。

2. Hooks是革命性的

React 16.8引入的Hooks，彻底改变了React的写法。函数组件+Hooks，比类组件简洁很多，逻辑复用也更方便。useState、useEffect、useMemo、useCallback，掌握了这些，开发效率很高。

而且Hooks的思想影响了整个前端圈，Vue 3的Composition API、Svelte的stores，都受了Hooks的影响。

3. 生态强大，社区活跃

React的生态是所有框架里最强大的。状态管理有Redux、Zustand、Jotai、Recoil；路由有React Router；UI组件库有Ant Design、Material UI、Chakra UI；SSR有Next.js；表单有React Hook Form、Formik。

几乎你能想到的需求，都有现成的库。而且React在全球都很流行，英文资料和社区讨论非常多。

4. 就业市场大

React的市场需求大，尤其是大厂和外企。会React，找工作的选择更多。

我踩过的坑：

坑一：学习曲线陡

React的学习曲线比Vue陡。JSX、组件化、单向数据流、Hooks，这些概念新手需要时间理解。尤其是Hooks，useEffect的依赖数组、闭包陷阱，很多人学了很久还是用不好。

我带过一个从Vue转React的同事，花了一个月才适应React的写法。他说Vue是"告诉你怎么写"，React是"给你工具，你自己想怎么写"。

坑二：状态管理的选择困难

React的状态管理方案太多了：Redux、MobX、Zustand、Jotai、Recoil、Context API……每个都有自己的优缺点，选哪个都纠结。

Redux虽然强大，但模板代码多，学习成本高。我在一个项目中用了Redux，后来发现项目不大，用Context API就够了，白白增加了复杂度。

而且React的状态管理和渲染性能强相关，useMemo、useCallback、React.memo用不好，就会导致不必要的重渲染，性能问题排查起来很头疼。

坑三：第三方库的碎片化

React生态丰富，但也碎片化。做一个表单，有React Hook Form、Formik、Final Form；做样式，有CSS Modules、Styled Components、Emotion、Tailwind CSS；做数据请求，有React Query、SWR、RTK Query。

选择多是好事，但也意味着团队要做很多技术决策，而且不同项目用的方案不一样，维护成本高。

坑四：Hooks的闭包陷阱

Hooks好用，但闭包陷阱是经典坑。useEffect里引用了外部变量，但依赖数组没写全，就会用到旧的值。或者在setTimeout里用state，拿到的是旧值。

比如：

const [count, setCount] = useState(0);

useEffect(() => {
  const timer = setInterval(() => {
    console.log(count);  // 永远是0！因为闭包捕获了初始值
  }, 1000);
  return () => clearInterval(timer);
}, []);  // 依赖数组为空

这个坑，几乎每个React开发者都踩过。

适合场景：

  • 大型复杂应用
  • 需要跨端（Web + 移动端）
  • 大厂和团队项目
  • 对灵活性要求高的项目

四、Angular：企业级，但重

Angular我在一个国企项目中用过半年，印象深刻。

优点：

1. 全家桶，什么都有

Angular是真正的"框架"，不是库。它自带路由、状态管理、表单、HTTP客户端、测试工具，甚至CLI都帮你生成代码。不用像React那样自己选一堆库，Angular都给你安排好了。

对大型团队来说，这很重要。技术栈统一，不用做技术选型，新人进来按官方文档学就行。

2. TypeScript原生支持

Angular是用TypeScript写的，对TS的支持最好。类型系统完善，IDE提示好，重构方便。对大型项目来说，类型安全很重要。

3. 适合大型企业应用

Angular的设计理念就是企业级应用。模块化、依赖注入、分层架构，这些特性让大型项目的代码结构清晰，可维护性好。

我参与的那个国企项目，有几十个模块，几百个页面，用Angular管理得井井有条。如果用React或Vue，可能需要自己制定很多规范。

我踩过的坑：

坑一：太重了，学习成本高

Angular的概念太多了：模块、组件、服务、指令、管道、依赖注入、RxJS、装饰器……新手要学很久才能上手。

我那个项目，一个新人进来，花了一个月才熟悉Angular的基本用法。如果是Vue，一周就能上手。

坑二：RxJS的学习曲线

Angular大量使用RxJS，HTTP请求、表单、路由，都是Observable。RxJS功能强大，但学习曲线很陡，操作符多，新手很容易晕。

我在项目中处理复杂的异步逻辑时，经常被RxJS的操作符搞晕，写出来的代码自己都不想看。

坑三：更新太快，破坏性升级

Angular每半年一个大版本，而且经常有破坏性更新。从Angular 8升到9，再升到10、11，每次升级都要改代码。虽然有ng update工具，但还是会遇到兼容性问题。

我那个项目，因为升级Angular版本，花了一周时间改代码，很痛苦。

坑四：国内社区小

Angular在国内用得不多，中文资料和社区讨论比Vue、React少很多。遇到问题，经常要去Stack Overflow搜英文答案，对英语不好的开发者不友好。

适合场景：

  • 大型企业级中后台
  • 国企、银行、政府项目
  • 团队大、需要统一技术栈
  • 对类型安全和可维护性要求高

五、Svelte：新势力，编译时框架

Svelte我是业余时间学的，做过几个小项目，很喜欢。

优点：

1. 编译时框架，运行时小

Svelte和Vue、React不一样，它不是在运行时做虚拟DOM diff，而是在编译时把组件转换成原生JS操作。所以打包体积小，运行时性能好。

一个简单的Svelte应用，打包后只有几KB，而React可能要几十KB。对性能和包体积敏感的项目，Svelte很有优势。

2. 语法简洁，代码量少

Svelte的语法非常简洁，响应式用$:标记，状态直接声明变量就行，不用useState、不用ref。同样的功能，Svelte的代码量比React、Vue少很多。

比如一个计数器：

<script>
  let count = 0;
  $: doubled = count * 2;
</script>

<button on:click={() => count++}>
  点击了 {count} 次，翻倍是 {doubled}
</button>

比React和Vue都简洁。

3. 内置动画和过渡

Svelte内置了动画和过渡效果，不用额外安装库。做交互动画很方便，而且性能好。

我踩过的坑：

坑一：生态还不够完善

Svelte还比较新，生态不如Vue、React完善。UI组件库少，状态管理方案也不成熟。做复杂项目，可能需要自己造轮子。

坑二：国内用的人少

Svelte在国内用的人很少，中文资料不多，遇到问题可能找不到答案。而且就业市场几乎没有Svelte的岗位，学了可能用不上。

坑三：大型项目的经验少

Svelte在小型项目中体验很好，但大型项目的实践案例少。不知道项目大了之后，可维护性和性能怎么样。

适合场景：

  • 小型项目和个人项目
  • 对包体积和性能敏感的项目
  • 静态网站和营销页
  • 学习和探索新技术

六、框架选型的经验

说了这么多，到底怎么选框架？根据我的经验，给几个建议。

1. 看团队和项目

  • 小团队、新手多、快速迭代：选Vue，上手快，生态全
  • 大团队、复杂项目、需要跨端：选React，生态强，灵活
  • 国企、大型企业中后台：选Angular，规范，可维护
  • 个人项目、小型工具：选Svelte，简洁，性能好

2. 看就业市场

如果是为了找工作，优先学React，其次Vue。React在大厂和外企需求大，Vue在中小企业需求大。Angular岗位少，Svelte几乎没有。

3. 不要盲目追新

新框架（SolidJS、Qwik等）可以了解，但生产项目要谨慎。生态不完善，坑多，出了问题没人帮你。

我见过很多团队，为了"技术先进"，用了很新的框架，结果项目维护不下去，最后又迁回React/Vue。

4. 框架只是工具，基础才是根本

不管用什么框架，HTML、CSS、JavaScript的基础才是根本。框架会变，但基础不会。把基础打牢，学什么框架都快。

我见过很多人，Vue用得很熟，但JS基础差，换个框架就不会了。这样的开发者，天花板很低。

七、那些年我踩过的通用坑

除了每个框架特有的坑，还有一些通用的坑，不管用什么框架都会遇到。

坑一：过早优化

项目刚开始，就纠结用什么状态管理、什么CSS方案、什么构建工具，花了很多时间在技术选型上，结果业务代码没写多少。

其实，先用最简单的方案把项目做起来，等遇到性能问题或维护问题了，再优化也不迟。过早优化是万恶之源。

坑二：过度封装

为了"复用"，把简单的逻辑封装成复杂的组件和hooks，结果复用没几次，维护成本却很高。

我见过一个项目，一个按钮组件封装了几百行代码，支持几十种属性，但实际上大部分页面只用最基础的功能。过度封装，反而增加了复杂度。

坑三：不写文档和注释

觉得代码自己能看懂，不写文档和注释。过了三个月，自己都看不懂了。团队换人之后，新人更是一头雾水。

不管项目大小，都要写基本的文档和注释。这不是浪费时间，是在给未来的自己和同事省钱。

坑四：不做代码审查

小团队，大家各写各的，不做code review。结果代码风格不统一，bug满天飞，后期维护痛苦。

不管团队多小，都要做code review。不是为了挑刺，是为了保证代码质量，也是互相学习的过程。

八、写在最后

前端框架发展到今天，已经很成熟了。Vue、React、Angular各有特点，没有绝对的好坏，只有适不适合。

选框架的时候，不要只看技术参数，要结合团队、项目、就业市场来综合考虑。适合自己的，才是最好的。

而且，框架只是工具，真正重要的是解决问题的能力。同样的框架，有人能写出优雅高效的代码，有人却写出一堆bug。差别不在框架，在人。

2022年了，前端还在快速发展，新框架、新工具层出不穷。但万变不离其宗，把基础打牢，理解框架的核心思想，学什么都快。

最后，用一句话总结："没有最好的框架，只有最适合的框架。选对了，事半功倍；选错了，事倍功半。"

祝大家都能选到适合自己的框架，写出优雅高效的代码。