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

优势：

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

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三种最流行的前端框架哪一个最好？

angular，react & vue