angular，react & vue

2018/07/23

2016年，对于JavaScript来说辉煌的一年。开发框架大量涌入，让开发者有了更多的选择。到了2018年就目前火热程度来说，angular，react，vue 仍占据着主流地位。

对比这3个框架，孰优孰劣真的会让选择困难症的人头痛不已。

参考本文，希望会对你有所帮助。

库 or 框架

库

被设计来执行一些特定的任务，而且通常并不复杂。因此，如果我们使用库来构建我们的应用程序，那么我们需要为每个任务选择一个库，以及设置任务运行者。

库的主要优点是我们可以完全控制应用程序。但问题是建立该项目需要更多的时间。

框架

被设计用于执行更复杂的事情。因此，如果我们使用框架，那么它会自动为我们解决很多问题。每个框架都有一个预定义的设计或结构，包括许多库和设置跑步者。

框架的主要优点是开发过程要快得多，因为它包含了我们执行不同任务所需的所有可能的库。但是一个框架比图书馆有更严格的设计。

需要库/框架？

库是我们需要的，不依赖库的人，太强大，不做讨论。

虽然无框架也是可以正常工作的，但是这是有代价的。

对于一个项目，它是由开发周期的，俗称的小项目，即开发周期短，那么添加框架反而是多余；相反开发周期长，那么一个好的框架将会更加的合适。

当然，如果你是一个有着深厚技术和经验的人，确实可以坦诚的不使用框架。但你团队的其他成员呢？你手下的那些人呢？或者当你的决定把你自己陷入困境的时候呢？这种情况下，我们将会看到一个不用框架的团队在展开冒险，最后他们会发现自己创建了一个需要自己着手维护的框架。

历史

Angular

将自己描述为“超级厉害的 JavaScript MVW 框架”

现在所说的angular通常指的是 angular2+，特质 angular1代会说明 angular1（2010年10月发布）。

由 Google 进行开发和维护，2代发布于2016年9月，现在主要是angular4。

遵守 MIT license

优势：

angular最大的优势在于它的流行程度，虽然在国内 react 和 vue 更加的火热。

对于用户来说它有一套用于构建用户界面的丰富组件

鉴于国人多数使用的是angular1.x ，它在api上比较全面，功能比较完善

React

将自己描述为 “用于构建用户界面的 JavaScript 库”

由 Facebook 进行开发和维护，发布于2013年3月。

开始遵守 BSD3-license（证书说明：Facebook 的专利授权是在保护自己免受专利诉讼的能力的同时分享其代码。有些人声称，如果你的公司不打算起诉 Facebook，那么使用 React 是可以的）

后期更改蹲守 MIT license

优势：

React + Redux 模式在于它们相对简单和专注，做一件事情并把它做好 是非常困难的，但这两个库都很有效地完成了它们的目标

组件发生变化，它会以该组件为根，重新渲染整个组件子树

Vue

2014年还没有人听说过vuejs，但是在2015年已经开始和angular，react相提并论，脱离了小众型的框架。2016年发展最迅速的js框架之一

将自己描述为“用于构建直观，快速和组件化交互式界面的 MVVM 框架”

由 Google 前员工 Evan You 发布，时间2014年2月，2016年版本2发布。

遵守 MIT license

优势：

一个简洁而且合理的架构，使得它易于理解和构建（国内的文档丰富清晰，有一个强大的充满激情人群的社区，这为 vue.js 增加了巨大的价值，使得为一个空白项目创建一个综合的解决方案变得十分容易）

使用基于依赖追踪的观察系统并且异步更新，左右的数据变化都是独立触发

发展

Angular 和 React 得到了诸如 Facebook ，Google，Whatsapp 等大公司的支持和使用。目前，Google 在他们的很多项目中使用Angular，例如 AdWords UI（用Angular和Dart实现）。

Vue 主要用于小型项目的个人。阿里巴巴，百度，Expedia，任天堂，GitLab 使用 — 可在 madewithvuejs.com 找到一些小型项目的列表。

比较

1. 组件

一个组件得到一个输入，并且在一些内部的行为/计算之后，它返回一个渲染的 UI 模板（一个登录/注销区或一个待办事项列表项）作为输出。定义的组件应该易于在网页或其他组件中重用。

React 和 Vue 都擅长处理组件：小型的无状态的函数接收输入和返回元素作为输出。

2. Typescript，ES6 与 ES5

Angular 依赖于 TypeScript

React 专注于使用 Javascript ES6

Vue 使用 Javascript ES5 或 ES6

与整个 JavaScript 语言相比，TypeScript 的用户群仍然很小。一个风险可能是你正在向错误的方向发展，因为 TypeScript 可能 - 也许不太可能 - 随着时间的推移也会消失。此外，TypeScript 为项目增加了很多（学习）开销 - 你可以在 Eric Elliott 的 Angular 2 vs. React 比较中阅读更多关于这方面的内容。

3. 模板 —— JSX 还是 HTML

几十年来，开发人员试图分离 UI 模板和内联的 Javascript 逻辑，但是使用 JSX，这些又被混合了。

JSX 是一个类似 HTML 语法的可选预处理器，并随后在 JavaScript 中进行编译。JSX 有一些怪癖 —— 例如，你需要使用 className 而不是 class，因为后者是 Javascript 的保留字。JSX 对于开发来说是一个很大的优势，因为代码写在同一个地方，可以在代码完成和编译时更好地检查工作成果。当你在 JSX 中输入错误时，React 将不会编译，并打印输出错误的行号。

JSX 意味着 React 中的所有内容都是 Javascript -- 用于JSX模板和逻辑

Angular 模板使用特殊的 Angular 语法（比如 ngIf 或 ngFor）来增强 HTML。虽然 React 需要 JavaScript 的知识，但 Angular 会迫使你学习 Angular 特有的语法。

Vue 具有“单个文件组件”。这似乎是对于关注分离的权衡 - 模板，脚本和样式在一个文件中，但在三个不同的有序部分中。

4. 性能

Angular 是一个框架而不是一个库，因为它提供了关于如何构建应用程序的强有力的约束，并且还提供了更多开箱即用的功能。Angular 是一个 “完整的解决方案” - 功能齐全，你可以愉快的开始开发。你不需要研究库，路由解决方案或类似的东西 - 你只要开始工作就好了。

React 和 Vue 是很灵活的。他们的库可以和各种包搭配。灵活性越大，责任就越大 - React 没有规则和有限的指导。每个项目都需要决定架构，而且事情可能更容易出错。

Vue 似乎是三个框架中最轻量的。源代码非常易读，不需要任何文档或外部库。

5. 状态管理

React 经常与 Redux 在一起使用。Redux 以三个基本原则来自述：

单一数据源（Single source of truth）
State 是只读的（State is read-only）
使用纯函数执行修改（Changes are made with pure functions）

换句话说：整个应用程序的状态存储在单个 store 的状态树中。这有助于调试应用程序，一些功能更容易实现。状态是只读的，只能通过 action 来改变，以避免竞争条件（这也有助于调试）。编写 Reducer 来指定如何通过 action 来转换 state。

Vue 可以使用 Redux，但它提供了 Vuex 作为自己的解决方案。

6. 数据绑定

React 和 Angular 之间的巨大差异是 单向与双向绑定。

当 UI 元素（例如，用户输入）被更新时，Angular 的双向绑定改变 model 状态。React 只有一种方法：先更新 model，然后渲染 UI 元素。Angular 的方式实现起来代码更干净，开发人员更容易实现。React 的方式会有更好的数据总览，因为数据只能在一个方向上流动（这使得调试更容易）。

最后，Vue 支持单向绑定和双向绑定（默认为单向绑定）。

7. 其他的编程概念

Angular 包含依赖注入（dependency injection），即一个对象将依赖项（服务）提供给另一个对象（客户端）的模式。这导致更多的灵活性和更干净的代码。

（MVC）将项目分为三个部分：模型，视图和控制器。Angular（MVC 模式的框架）有开箱即用的 MVC 特性。React 只有 V —— 你需要自己解决 M 和 C。

8. 灵活性与精简到微服务

你可以通过仅仅添加 React 或 Vue 的 JavaScript 库到你的源码中的方式去使用它们。但是由于 Angular 使用了 TypeScript，所以不能这样使用 Angular。

现在我们正在更多地转向微服务和微应用。React 和 Vue 通过只选择真正需要的东西，你可以更好地控制应用程序的大小。它们提供了更灵活的方式去把一个老应用的一部分从单页应用（SPA）转移到微服务。Angular 最适合单页应用（SPA），因为它可能太臃肿而不能用于微服务。

9. 体积和性能

Angular 框架非常臃肿。gzip 文件大小为 143k，而 Vue 为 23K，React 为 43k。

为了提高性能，React 和 Vue 都使用了虚拟 DOM（Virtual DOM）。

QQ截图20200208131839.jpg

Vue 有着很好的性能和高深的内存分配技巧。如果比较快慢的话，这些框架都非常接近（比如 Inferno）。请记住，性能基准只能作为考虑的附注，而不是作为判断标准。

10. 测试

Facebook 使用 Jest 来测试其 React 代码。

Angular 2 中使用 Jasmine 作为测试框架。

Vue 缺乏测试指导，但是 Evan 团队推荐使用 Karma。

11. 通用与原生 app

Angular 拥有用于原生应用的 NativeScript（由 Telerik 支持）和用于混合开发的 Ionic 框架。

借助 React，用 react-native 开发原生 app。

Vue 可以说拥有Weex开发原生 app。

12. 学习曲线

Angular 的学习曲线确实很陡。它有全面的文档，但你仍然可能被吓哭，因为说起来容易做起来难。即使你对 Javascript 有深入的了解，也需要了解框架的底层原理。

对于 React，你可能需要针对第三方库进行大量重大决策。仅仅 React 中就有 16 种不同的 flux 软件包来用于状态管理可供选择。

Vue 学习起来很容易。公司转向 Vue 是因为它对初级开发者来说似乎更容易一些。有了 Vue，初级和高级开发人员之间的差距缩小了，他们可以更轻松地协作，减少 bug，减少解决问题的时间。

在调试方面，React 和 Vue 的黑魔法更少是一个加分项。找出 bug 更容易，因为需要看的地方少了，堆栈跟踪的时候，自己的代码和那些库之间有更明显的区别。使用 React 的人员报告说，他们永远不必阅读库的源代码。但是，在调试 Angular 应用程序时，通常需要调试 Angular 的内部来理解底层模型。从好的一面来看，从 Angular 4 开始，错误信息应该更清晰，更具信息性。

13. 底层原理

如果你想检查源代码，那么你可以访问下面的GitHub仓库：

Angular：https://github.com/angular/an...

React：https://github.com/facebook/r...

Vue：https://github.com/vuejs/vue

总结

如果你在Google工作：Angular

如果你喜欢 TypeScript：Angular（或 React）

如果你喜欢面向对象编程（OOP）: Angular

如果你需要指导手册，架构和帮助：Angular

如果你在Facebook工作：React

如果你喜欢灵活性：React

如果你喜欢大型的技术生态系统：React

如果你喜欢在几十个软件包中进行选择：React

如果你喜欢JS和“一切都是 Javascript 的方法”：React

如果你喜欢真正干净的代码：Vue

如果你想要最平缓的学习曲线：Vue

如果你想要最轻量级的框架：Vue

如果你想在一个文件中分离关注点：Vue

如果你一个人工作，或者有一个小团队：Vue（或 React）

如果你的应用程序往往变得非常大：Angular（或 React）

如果你想用 react-native 构建一个应用程序：React

如果你想在圈子中有很多的开发者：Angular 或 React

如果你与设计师合作，并需要干净的 HTML 文件：Angular or Vue

如果你喜欢 Vue 但是害怕有限的技术生态系统：React

如果你不能决定，先学习 React，然后 Vue，然后 Angular。

参考

[译] 2017 年比较 Angular、React、Vue 三剑客

6 大主流 Web 框架优缺点对比

React、Angular和Vue三种最流行的前端框架哪一个最好？

近两年前端各框架流行程度与趋势分析

图1

上图显示了2016年10月至2017年10月的12个月期间，各个框架的绝对受欢迎程度及其增长情况。可以看出：

① Vue 的成长速度非常快。

② Angular的受欢迎程度基本保持不变。

③ jQuery仍然非常受欢迎，但用户使用量越来越少。

④ React 既庞大又在快速增长。

明显以上四个框架在开发中优势较大，所以，本次调研在Vue 、Angular 、React 和jQuery之间做比较。

Vue.js框架

特点：MVVM框架、数据驱动、组件化、轻量、简洁、高效、快速、模块友好等。

资源上：在以上所有框架中，Vue.js虽然是其中最为年轻的框架，但它已经拥有不少成熟的UI组件、开发框架和实用库、辅助工具等，在开发中可以配合Vue.js框架使用。以下为网络整理组件库总结链接地址：

https://www.cnblogs.com/jearay/p/8580958.html

值得一提的是Vue.js提供脚手架Vue-cli，本质是一套文件结构，包含基础的依赖库，能够帮助快速的开始一个Vue项目。

在兼容性方面：Vue.js不支持IE8及其以下版本，因为Vue.js使用了IE8不能模拟的es5特性。同时，Vue.js支持所有兼容es5的浏览器。具体版本如下图2。

图2 Vue2.0兼容情况

在调试与维护方面：对于Vue.js,调试有着专门的插件Vue-devtools，是一款基于chrome浏览器的插件，能够极大提高调试的效率。之前提到一个Vue的特点就是它是一个MVVM设计模式的框架，这样的模式会使代码维护起来更加方便。

Vue的缺点：生态与老牌框架仍是不足。编辑器对Vue的支持度也是不够，缺少代码提示。

适用场景：Vue的解决方案适用于小型应用，但对于对于大型应用而言不太适合。

附参考模板：https://www.cnblogs.com/herozhou/p/7434931.html

http://www.templatesy.com/Article/550.html

React.js框架

React是由Facebook开发并维护的一款JS库。

特点：声明式设计、虚拟DOM、JSX语法、组件化、单向响应数据流、轻等。

资源上：React框架是如今最火爆的前端技术框架。它有最吸引人的一点就是拥有众多的成熟的组件库，比如其中一些较为出名的React Material-UI、React-Bootstrap、Ant Design React等，以下有常见较成熟组件库的简单介绍和地址：

https://blog.csdn.net/snsHL9db69ccu1aIKl9r/article/details/79454984

在兼容性方面：V15版本以后正式告别IE8，可以通过es5-shim和es5-sham来兼容。

在调试与维护方面：Facebook为React提供了一个很给力的调试工具，React Developer Tools。可以自由安装在Chrome中或者FireFox中，上手基本没有难度。React的组件化特性使每个组件都拥有独立的功能视图模块，许多小的组件组成一个大的组件，整个页面也是由组件组合成的，非常利于重复利用和后期的维护。

React的缺点：React本身只是一个View层的一个框架而已，如果需要开发的型的应用，需要配合其他的库和框架。

适用场景：React是组件化开发，非常适用于不是很复杂的移动端。

附参考模板：https://github.com/yezihaohao/react-admin

                https://github.com/zuiidea/antd-admin

                https://github.com/zhaoyu69/antd-spa

Angular.js框架

Angular是由Google负责维护的JS库。

特点：MVC模式、模块化、自动化双向数据绑定、依赖注入等。

在资源上：Angular目前由互联网巨头Google开发维护，在资源上是毋庸置疑的。社区基础是不用担心的，整个生态也已经是非常的完整，在开发中可以使用的组件、UI框架和库、服务性质的插件、用于测试与模拟数据的插件有许多。以下有Angular成熟好用的插件集合：

https://segmentfault.com/a/1190000003858219

在兼容性方面：AngularJS 1.2将继续支持IE8，但核心团队不会花时间去针对IE8或更早的IE浏览器问题作集成测试。如果确实需要在兼容IE8的同时使用1.3，就需要自己做全面测试。不过，这样做的话性价比比较低。所以，在工程实践中，一般以IE8为分界，如果需要兼容，就用1.2，否则就用之后的版本。在其他浏览器中，Angular的兼容是没有什么问题的。

调试与维护：关于Angular的调试，有专门用于浏览器的插件batarang。它可以查看作用域、输出调试信息、以及对性能进行监控。angular不像普通的js，如果抛出错误，只会报angularJs的错，找不到错误代码的位置，借助于batarang可以方便调试angular代码。
Angular的缺点：第一点，Angular框架过重，不像Vue和React是非常轻量级的框架，过大的框架导致性能方面消耗严重，这不是一个正常的前端网站能够容忍的，同时它的学习成本相对来说较高。第二点，Angular的文档编制非常糟糕，暴露的API中相当一部分是没有任何有用描述的方法和属性的简短存根。

适用场景：它试用在大型的浏览器端，大型网站项目。

附参考模板：https://github.com/akveo/blur-admin

                  https://github.com/akveo/ngx-admin

                   http://www.mycodes.net/154/9043.htm

                   https://github.com/myopenresources/cc

jQuery框架

与其说jQuery是框架倒不如说它是一个JS库更合适。它是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。

jQuery核心特性：轻量级、具有独特的链式语法和短小清晰的多功能接口、具有高效灵活的css选择器，并且可对CSS选择器进行扩展、拥有便捷的插件扩展机制和丰富的插件、jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera9.0+等。

在资源上：jQuery的易扩展性，吸引了来自全球开发者来编写jQuery的扩展插件。目前官方支持的插件已经有小几千种，民间插件就更多了。各种插件库、社区和工具网站也是非常多的。在所有的框架中jQuery在这一部分应该是最强的了。

兼容性：jQuery的1.x版本可以兼容到IE低版本（IE6、IE7、IE8），2.x及以上版本抛弃了对IE低版本的支持。

调试与维护：可以Chrome环境中安装jQuery Debugger插件。在Chrome默认的调试器中可以看到由插件生成的jQuery专用的调试栏。

jQuery的缺点：插件兼容性问题，jQuery不能向后见日兼容，这就导致了插件由于版本之间的不兼容出现的问题。再者在同一个项目中同时引入多个插件可能会引起插件之间的冲突，导致难以修复的BUG。

附参考模板：https://github.com/usmanhalalit/charisma
————————————————
版权声明：本文为CSDN博主「Tsinbo1314」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/tsinbo1314/article/details/80367452

前端框架angular、react、vue三者对比