angular，react & vue

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

angular，react & vue

2018/07/23

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

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

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

库 or 框架

库

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

框架

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

需要库/框架？

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

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

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

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

历史

Angular

React

Vue

发展

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