前言

入行三年多，由于最近开始接手angular项目，到此为止，算是三大框架都撸了一遍了，不敢说熟练使用，但是也是有了一些使用和选型心得了，在此尝试细说三大框架的优点以区别，加深自己理解的同时，帮助大家快速搞定技术选型。

首先交代一下三大框架使用情况，vue 使用最多，从头贯穿到现在，其次是react，angular排在最后，仅仅三月有余，完全是被动学习，原因很简单，国内真的没有人用，找到一个能有使用angular 的公司真是难上加难，先来看下大佬整理的国内的三大框架使用情况！

React：蚂蚁数据可视化、爱彼迎、飞猪、阿里大于、虾米音乐、口碑开放平台、猫途鹰、喜马拉雅、斗鱼、知乎、豆瓣、美团外卖H5、房多多、石墨文档、墨刀、TalkingData、xiaopiu、Teambition、Uber、倍洽、同盾科技、心知天气、拼多多（APP内嵌H5）、滴滴出行、Sentry、途牛、优酷、京东服饰+生鲜+旅行+赚钱H5、瓜子金融H5、算力矩阵、链家H5、阿里云管理后台、Coding、CodePen、树莓派、36氪、Notion、GoDaddy、站酷海洛、Plotly、麦客CRM、特赞营销日历、鹿班、网易云阅读PC端+网易云音乐H5、猎聘网、看云文档编辑页、NIKE官网、丁香医生、去哪儿H5多个模块、艺龙H5个别模块、租租车H5、汽车之家车商城、PayPal中国、Pocket、友盟、iH5...

Vue：饿了么、爱奇艺、中国平安H5、简书、途虎养车、小红书、乐视商城、手机搜狐、优酷、土豆、掘金、微博H5、大麦网H5、唯品会H5、小米商城H5、芒果TV移动版、哔哩哔哩、又拍云、七麦数据、OneAPM、阿拉丁小程序统计、网易云信+手机网易+网易邮箱H5登录页、今日头条+西瓜视频网页版、贝店（APP内嵌H5）、大搜车、滴滴开源、高德开放平台、京东拼购+领券+新人频道H5+京东云、瓜子二手车H5、土巴兔、分期乐、BITMAIN、小猪短租H5、IT桔子、创业邦H5、拍拍贷、极客邦科技+极客时间、开源中国、少数派、蓝湖、百度指数、微信公众平台、大鱼号（UC云观）、创客贴、兑吧、国美电器H5、聚美优品触屏版、钱咖、试客小兵、赚客、雪球财经、电玩巴士、Hao123触屏版、弹个车、携程H5多个模块、穷游网、一加手机...

AngularJS：百度脑图、eolinker、海致BDP、极光、Worktile、锤子科技官网、微信网页版、iTunes Connect、阿里云管理后台、鲸准对接平台...

从上面数据来看，vue react 旗鼓相当，但是angular着实有点惨淡，接下来说一下三大框架的好坏

框架之争

首先抛出个人观点，三大框架都是好框架，他们都有着完成大型项目的能力，都有着活跃的社区（但是在中国angular差点，遇见问题百度基本搜不到解决方案着实令人着急），其实，这么久一来，框架好坏之争一直是个前端工程师，打口水仗的必备话题，最开始我也喜欢vue，他响应式的写法，简洁的语法，以及不用借助工具，单纯引入cdn文件就能开发的能力，着实令人着迷，但是后来我发现，react 更灵活的写法，处处都能秀的最佳实践，以及更多的选择所带来的新鲜感，连一个css 都能给玩出花来，在后来，接触了angular 发现他又大又全的能力，更好的工程化，强制性分层、依赖注入，以及ts天然的代码检查能力，也非常香，那么问题来了，那个才是最好的框架呢？

答案是，没有最好的框架，他么都是好框架，主要看使用框架的人好不好，强不强，厉害不厉害，但是，现在大多数前端码农依旧还在为自己的喜好而争个胜负。框架只是接管、包裹、组织，从这个角度来说，各框架都一样。不一样的是范式和编程模式，灵活的函数式，森严的面向对象方式，以及借助各种思想工具减少我们的开发时间，优化我们的开发体验，选框架，只不过是信仰，并没有好坏之分，就好像你信任佛教，他信任基督教一样。

三大框架的特点

vue

先来说vue 这个我使用最多的框架，也是github中的小星星最多的框架，一般前端老人比较喜欢使用，我还依稀的记得跟我们领导一块吃饭的时候酒过三巡，我问领导为啥你这么喜欢vue，领导算前端老人，属于最早入行的一批前端，七八年工作经验，他说，对于我们老人来说，他们是从ie6过来的，在jquery那个年代，他们对于jquery那种频繁操作dom的繁琐的开发方式相当痛苦，后来三大框架出来，也都用了一遍，后来发现，vue的模板语法，对于他们来说，相当亲切，数据驱动视图的理念，隐藏操作dom的繁琐步骤，以及渐进式的集成，他接着说，年纪大了，学不动了，vue的简单，上手快，最主要的是，好招人（这个年限了，大部分都是领导了），等优点，真的是爱不释手。

接下来，咱来细说一下我认为的vue的优点

1、响应式

响应式的系统可谓相当方便，也就是基于是数据可变的，通过对每一个属性建立Watcher来监听，当属性变化的时候，响应式的更新对应的虚拟dom。具体原理不在赘述，直接上图：

2、模板语法

在vue中，我们就行在写html一样自由畅快，这就得利于vue的模板语法

<p>{{message}}</p>

为啥之前说前端老人喜欢用vue，因为他的模板语法，对于老前端来说相当的亲切，因为他们都是从html过来的，那我们的模板语法到底是怎么来的呢？

首先我们说vue的模板其实不html，那么既然不是html他一定是被转换成了一个js代码，就是所谓的模板编译，在vue 中使用的就是vue-template-compiler这个模板编译工具，那这个工具做了什么呢？其实就是将 Vue 2.0 模板预编译为渲染函数（template => ast => render）

//模板代码
const compiler = require('vue-template-compiler')
const result = compiler.compile(`
  <div id="test">
    <div>
      <p>This is my vue render test</p>
    </div>
    <p>my name is {{myName}}</p>
  </div>`
)

console.log(result)

{
//编译结果
  ast: {
    type: 1,
    tag: 'div',
    attrsList: [ [Object] ],
    attrsMap: { id: 'test' },
    rawAttrsMap: {},
    parent: undefined,
    children: [ [Object], [Object], [Object] ],
    plain: false,
    attrs: [ [Object] ],
    static: false,
    staticRoot: false
  },
  render: `with(this){return _c('div',{attrs:{"id":"test"}},[
        _m(0),          // 上述提到的静态子树，索引为0 <div><p>This is my vue render test</p></div>
        _v(" "),        // 空白节点 </div> <p> 之间的换行内容
        _c('p',[_v("my name is "+_s(myName))])  // <p>my name is {{myName}}</p>
    ])}`,
  staticRenderFns: [
    `with(this){return _c('div',[_c('p',[_v("This is my vue render test")])])}`
  ],
  errors: [],
  tips: []
}

然后我们执行这个render函数，就会返回一个vnode，接下来就是我们熟悉的diff算法，到更新视图

3、实现MVVM

实现了MVVM我至少认为这是一个福音，用数据去驱动视图，简化繁琐的操作dom，更关注与业务逻辑，这样就能节省开发时间，和写出易于维护的代码，那么什么叫mvvm呢？

直接上图，view，和model很好理解，那么viewmodel到底是什么呢？他是一个抽象的东西，在vue 中viewmodel其实就是比如我们的方法，我们的事件，等等，都是这一层，这一层的操作，帮助改变数据，或者改变视图，起到承上启下的作用，也实现了，vue非常经典的数据双向绑定

4、使用友好，上手简单

这是vue最为亮眼的一点，比起react的jsx，比起angular的rxjs，以及各种依赖注入，vue 的语法风格，和使用api相当友好，社区也都有都一些相对固定的方案，当然，还有一点比较幸福的是vue的性能优化做的相当到位，不用我们手动优化，不用像react那样父组件更新render子组件也要跟新，到底还是中国人写的，有那么点中庸之道的意思，把简单和选择留给别人，复杂和无奈留给自己……

5、弱化性能优化，用户只需关注逻辑

相比与react和angular vue在按照模板格式开发时就没有太多限制，得益于响应式系统，也不用去做相对应的性能优化，由于vue 内部的模板语法，能在开发环境下编译，这样就能在编译的时候去做一些性能优化比如，在这段vue我明确知道第二个name是变量这样在内部就会有针对性的优化

<template>
    <ul>
        <li>0</li>
        <li>{{ name }}</li>
        <li>2</li>
        <li>3</li>
    </ul>
</template>

而在react 中，由于jsx的写法灵活，不确定性多，所以在编译时就无法去做性能优化，而性能优化放到了我么开发者身上

<ul>{
    data.map((name, i) => <li>{i !== 1 ? i : name}</li>)
}</ul>

react

1、不可变值的设计思想，也是函数式编程的实践

我们知道，在react中性能优化的权利交给了开发者，所以，在默认情况下当react 的父组件更新时，子组件必然更新，这样，就需要我们使用react 提供的一些优化手段，比如scu，比如purecomponent和memo等，来进行相关的性能优化，我们知道 ShouldComponentUpdate(SCU)可以用来阻断更新的蔓延。但是React组件默认并没有实现它，因而需要开发者来判断是否需要对应用进行性能优化。在这个方法中，你可以检测组件的state或props是否被修改，如果没有修改那么将返回false，那么这个组件和它的子组件都不会被重新渲染。问题在于这里：如果数据是可变的，并且被直接修改了，SCU会一直返回false，这就导致组件永远不被重新渲染，在设计之初，这个不可变值的的理念就贯穿react，甚至还为不可变值专门耗时两年开发了Immutable.js 这个js的库，这也是函数式编程的理念。

2、all in js

在react中一切皆js，其实所谓的jsx也只是一个语法糖，正是由于这样的开发体验，许多开发者会有种写的更爽的感觉，他没有vue中各种模板语法的限制，编写自由度高，他注重更更大的颗粒度拆分，推重组件化的设计思想，在react 中一切皆是组件，一个大型的项目都是有一个个组件仿佛积木一般堆积而成

3、活跃的社区，繁荣的生态

这一点是react 最为骄傲的一点，他清楚自己应该做什么，剩下都交给了社区去做，他不像vue一样，生态社区相对稳定，基本上一套下来整个社区都认可一些相对固定的方案，而在react中可谓百花齐放，比如在公共数据状态管理就有redux，mobx，还有最近出来的concent 的也是让人耳目一新，比如css 也是不可开交，前有sass，less，后又css in js 的style-components，在比如，一个可以实现在redux中实现异步的中间件就有redux-thunk，和redux-saga等等，更别提在react基础上出现的dvajs，这样一个用于代替redux的库，以及umi的出现，目的是为了代替cra，总之有选择困难症的同学用react可要慎重，因为，选择真的太多了，你会无从下手。正是由于react这开放的思维方式（对应中国人的vue中庸），各种轮子层出不穷，大家搞研究的热情不减，前端也越来越重要，工资也越来越高。我觉得好多大厂之所以选择react正是因为react折腾起来顺手，都是技术大牛，谁不想没事搞搞大新闻，是吧！

4、多端发展跨平台的能力

由于RN的加持，搞定react的语法之后，你甚至就可以去手撸一个app，这里vue 是做不到的，也正是因为这样，你会发现，在react 中的事件是自己写的，而不是用的浏览器原生的，就是因为他需要用自己写的这一套合成事件的机制来实现跨端事件，原理其实很简单

入上图所示，就是react 自己的事件机制，这样就能实现很好的跨平台能力。

5、Fiber(时间分片)

react16中新增了Fiber(时间分片)，这种渲染机制，他将Reconcilation阶段的人物分成一个个执行单元，也就是所谓的fiber，然后利用requestIdleCallback这个方法去在主进程空闲的状态下执行一个个fiber，原理如下：

如此一来，大致解决了由于react渲染时由于diff计算过长占用主进程所带来的卡顿，以及掉帧问题。

angular

由于angular 仅上手三个月，诸多原理不甚了解，大致列举一下，

提供了完成的端到端的解决方案

之前之所以说angular 又大又全，是因为，他不需要借助社区的力量，仅仅靠自己就能实现一个产品从开始到上线的解决方案，比如，他提供完备的单元测试方案，这里你在新建组件的时候都会给你一个测试的ts，在比如，他会提供开发时所需的所有服务，比如http服务，比如router服务，比如公共数据管理服务service，这些angular 全部完备，他更像是一个后端语言，严格的类型检查，拥抱ts，强制性分层，以及更好的工程，面向对象编程的思想。angular很高大全同时也很复杂，angular官方库给了你一切你想要的，使用angular技术栈，基本上你不用对组件选型浪费太多时间精力（对比react）。

三大框架的一些区别和联系

联系

我在学习三大框架时，发现我学vue 是一个月，可能到了react就需要20天，在到angular 可能也就需要15天了，其实是因为他们都有着千丝万缕的联系，只要这个思想有了，那么三大框架的学习难度是逐渐降低的，尽管行业都是angulr比react难学，react比vue难学，接下来我们就来说说他们的联系

1、组件化

三大框架中，都是提倡组件化开发的框架，所以，比如当你在开发vue的项目时，具备组件化的思想，在平常开发中能够有意识的去抽离展示型组件，和容器型组件，那么，在开发react 和angular时，你只会得心应手，不会处处为难

2、都是数据驱动视图

三大框架，都是属于mvvm框架，数据驱动视图的思想始终贯穿始终，所以我们在开发时，只需要关注数据变化即可，虽然使用方式不尽相同，react 属于函数式，angular 和vue 属于声明式编程，但是，数据驱动的思想不变，比如react 使用setState赋值，而vue 和angular 使用显式直接赋值他们最后的目的都是改值，从而触发页面更新

3、共同的开发套路

在三大框架中，由于都遵循组件化思想，所以，都有着相同的开发套路，只是使用方式略有差别，比如，都有父子组件传递，都有数据管理框架，都有前端路由，都有插槽，只不过在anguar中叫做投影组件,在react 中叫组合，都能实现一些所谓的高阶（hoc）函数

所以当你掌握其中一个框架以后，那么在其他框架遇见上述类似的业务场景时，只需百度只需百度其他框架类似的用法即可，到这里我终于明白刚入行是，领导告诉我，学程序，就是学思想。有了思想，框架之间就会没有壁垒。

区别

我所知道的联系基本也就这么多，其实这些联系基本能应付日常的业务开发，很多人之所以感觉学完三个框架吃力，是因为，在框架之外延伸出来的知识，是无穷无尽的，比如，你想要会用三大框架，ts ，rxjs，redux，vuex，mobx，router，node ，npm ，webpack，中间件等你多少都要知道一点，因为每个框架选择拥抱的社区不一样，那么我们需要学习的东西他就不一样，但是，当你给这些都了解完成时候，发现，其实他们的大多数的使用方式和思想也都是有相似之处，接下来说说区别

模板 vs JSX

React与Vue，angular最大的不同是模板的编写。Vue和angulr鼓励你去写近似常规HTML的模板。写起来很接近标准HTML元素，只是多了一些属性。而react则崇尚all in js 所以独创jsx的编写风格，但是他们本质上都是一个语法糖，编译之后都是一个可执行的函数，

Virtual DOM vs Incremental DOM

在底层渲染方面，vue 和react 都使用的虚拟dom，而angular 却没有使用，查了一下，他好像使用的是Incremental DOM，具体区别请移步了解Angular Ivy: Incremental DOM 和 Virtual DOM

函数式编程，声明式编程

在react中不可变值贯穿整个框架，如果你要改变数据，那么必须调用api去改，这就是函数式编程的思想，而在vue，和angualr中，声明式编程的思想也深入人心，既方便有快捷。这种直接赋值的方式，和用api赋值的方式，其实，只是用法不同而已，本质还是数据驱动

社区复杂度

在angular 和vue 中，几乎给你想要的全部给你了，而react 追求的更多的是自力更生，所以，有选择困难症的人才会如此的纠结。

入门难度

angular 工程化最好的框架，，也是由于拥抱rxjs，和ts（到现在ts的泛型我都搞不明白），也是最难的框架

react 上手也也比较简单，尤其是16引入hooks之后，号称api终结者，但是由于社区太过活跃各种新东西层出不穷，中文文档晦涩难懂，导致相对于vue上手也有难度

vue由于是中国人写的，有着完善的中文文档，和稳定的社区，并且有着亲切的模板语法，应当说是入门相对来说是最简单的了。

三大框架应该怎么选

对于学习

对于学习来说，我是三个框架的使用都在学习，毕竟艺多不压身，但是还是注重react，和vue ，毕竟在国内，这两个好了才能吃饱饭，之所以三个框架都要学习，是由于我的感受就是，体会到三个框架都有点以及缺点，由于思想都有相似之处，那么，在之后的项目中，就能知道前辈这样写的好处，以及用心，比如，我在写angular 的框架中，由于需要缓存路由页面，那么我就会给数据存在service中，那么在写react时，我突然就知道了，为啥当时写react 项目时由于用了redux，领导建议给所有数据存在redux中，在比如angular中由于ts天然的语法检查，使用了之后直呼真香，那么之后在使用react的时候就会引入prop-types等静态类型检查的工具去防止诡异的bug。所以，我建议就学习来说，有时间三大框架都学习一下。

对于个人项目

对于个人项目来说，三大框架那都是有一战之力，如果你是接的私活，那么一定要用自己最熟悉的框架，因为我的之前经验是，用之前没用过的东西，折腾起来太累了，很多坑。搞得时间长了，私活这点钱，还不如公司多加加班的加班费高，得不偿失。但是如果是自己折腾的项目，那就随便了，想用啥用啥，毕竟有的人就是觉得vue的烂七八糟的指令用起来太费劲呢

对于公司项目

对于公司的项目就要谨慎了，要考虑现有的团队资源，项目需求以及技术上的风险，以及公司的招聘成本，其实对于三大框架来说，对于大型项目也都是能hold住的的，技术选型选的后期，到底还是选设计能力。设计的好，三大框架都能胜任大型项目，主要技术选型还是人的问题，

1、由于vue 上手快，容易招人，所以，如果项目紧急，公司前端团队整体技术实力薄弱，那么vue是个非常不错的选择

2、如果是超大型项目，公司人手又足，技术实力强悍，学习能力强，那么angular绝对是不二之选，就可维护来说，angualr 绝对是上上选，但是就我写着三个多月的angualr来说，如果前端团队整体水平参差不齐，真的是没法维护，写到后期你绝对会有找代码三小时，写代码三分钟的体会（别问为什么）

3、如果团队内部，技术实力还行，但是时间有限，那么react，和vue 那都是不错选择，当然更推荐react一些，因为写的更爽，那种成就感，不言而喻！之所以不推荐angualr 就项目而言 ng 的局限实在太大。ts ，rxjs ，装饰器，依赖注入…… 学习成本实在太高

4、如果要考虑兼容性，那还是什么都别用的好，老老实实jquery吧！

以上只是建议，总是技术选型，要考虑的问题太多了，也免不了和人打交道，比如，公司的架构是个后端的，那么他肯定首推angualr，这时作为前端组长，也只能听命了，在比如，公司之前项目是react，那么这时有新项目时，要不要增加团队的成员的学习成本，也是要考虑的问题，总之，在技术选型时，不能形成鄙视链，有人觉得angular牛逼，看不起用react，和vue的，觉得ts ，rxjs ，装饰器，依赖注入等这些新东西会了以后，就视别人为菜鸡，其实，这些思想并不是你们设计的，而且，如果选型之后，对基层程序员要求自然也提升了一个档次，美其名曰是能筛选更优秀的人，但是也想想，为啥优秀的人为啥要在年这当个小兵。所以千万不要人云亦云，听别人说什么好，那他就是好的，其实对于公司来说，合适才是最重要的，并不一定是最好的。

最后

终于总结完了，其实对三个框架，也只是能用的阶段，总结的比较笼统，老规矩不对之处请大佬留言指点。