angular，react & vue

本文当时写在本地，发现换电脑很不是方便，在这里记录下。

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

优点：

1. angular最大的优点在于它的流行程度，虽然在国内 react 和 vue 更加的火热。
2. 对于用户来讲它有一套用于构建用户界面的丰富组件
3. 鉴于国人多数使用的是angular1.x ，它在api上比较全面，功能比较完善

React

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

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

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

后期更改蹲守 MIT license

优点：

1. React + Redux 模式在于它们相对简单和专一，作一件事情并把它作好 是很是困难的，但这两个库都颇有效地完成了它们的目标
2. 组件发生变化，它会以该组件为根，从新渲染整个组件子树

Vue

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

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

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

遵照 MIT license

优点：

1. 一个简洁并且合理的架构，使得它易于理解和构建（国内的文档丰富清晰，有一个强大的充满激情人群的社区，这为 vue.js 增长了巨大的价值，使得为一个空白项目建立一个综合的解决方案变得十分容易）
2. 使用基于依赖追踪的观察系统而且异步更新，左右的数据变化都是独立触发

发展

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）。

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 三剑客](https://juejin.im/post/5a0d5d...
• 6 大主流 Web 框架优缺点对比
• React、Angular和Vue三种最流行的前端框架哪个最好？