angular和vue和react的区别_vue react angular

如果你的开发人员具有面向对象的背景或者不喜欢 Javascript，Angular 也是很好的选择。为了推动这一点，这里是 Mahesh Chand 引述：

我不是一个 JavaScript 开发人员。我的背景是使用 “真正的” 软件平台构建大型企业系统。我从 1997 年开始使用 C，C ++，Pascal，Ada 和 Fortran 构建应用程序。（…）我可以清楚地说，JavaScript 对我来说简直是胡言乱语。作为 Microsoft MVP 和专家，我对 TypeScript 有很好的理解。我也不认为 Facebook 是一家软件开发公司。但是，Google 和微软已经是最大的软件创新者。我觉得使用 Google 和微软强大支持的产品会更舒服。另外（…）与我的背景，我知道微软对 TypeScript 有更宏伟的蓝图。

emmmmmmmm… 我应该提到的，Mahesh 是微软的区域总监。

React，Angular 和 Vue 的比较

组件

我们所讨论的框架都是基于组件的。一个组件得到一个输入，并且在一些内部的行为/计算之后，它返回一个渲染的 UI 模板（一个登录/注销区或一个待办事项列表项）作为输出。定义的组件应该易于在网页或其他组件中重用。例如，你可以使用具有各种属性（列，标题信息，数据行等）的网格组件（由一个标题组件和多个行组件组成），并且能够在另一个页面上使用具有不同数据集的组件。这里有一篇关于组件的综合性文章，如果你想了解更多这方面的信息。

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

Typescript，ES6 与 ES5

React 专注于使用 Javascript ES6。Vue 使用 Javascript ES5 或 ES6。

Angular 依赖于 TypeScript。这在相关示例和开源项目中提供了更多的一致性（React 示例可以在 ES5 或 ES6 中找到）。这也引入了像装饰器和静态类型的概念。静态类型对于代码智能工具非常有用，比如自动重构，跳转到定义等等 - 它们也可以减少应用程序中的错误数量，尽管这个话题当然没有共识。Eric Elliott 在他的文章 “静态类型的令人震惊的秘密” 中不同意上面的观点。Daniel C Wang 表示，使用静态类型并没有什么坏处，同时有测试驱动开发（TDD）和静态类型挺好的。

你也应该知道你可以使用 Flow 在 React 中启用类型检查。这是 Facebook 为 JavaScript 开发的静态类型检查器。Flow 也可以集成到 VueJS 中。

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

更新: James Ravenscroft 在对这篇文章的评论中写道，TypeScript 对 JSX 有一流的支持 - 可以无缝地对组件进行类型检查。所以，如果你喜欢 TypeScript 并且你想使用 React，这应该不成问题。

模板 —— JSX 还是 HTML

React 打破了长期以来的最佳实践。几十年来，开发人员试图分离 UI 模板和内联的 Javascript 逻辑，但是使用 JSX，这些又被混合了。这听起来很糟糕，但是你应该听彼得·亨特（Peter Hunt）的演讲 “React：反思最佳实践”（2013 年 10 月）。他指出，分离模板和逻辑仅仅是技术的分离，而不是关注的分离。你应该构建组件而不是模板。组件是可重用的、可组合的、可单元测试的。

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

JSX 意味着 React 中的所有内容都是 Javascript – 用于JSX模板和逻辑。Cory House 在 2016 年 1 月的文章 中指出：“Angular 2 继续把 ‘JS’ 放到 HTML 中。React 把 ‘HTML’ 放到 JS 中。“这是一件好事，因为 Javascript 比 HTML 更强大。

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

Vue 具有“单个文件组件”。这似乎是对于关注分离的权衡 - 模板，脚本和样式在一个文件中，但在三个不同的有序部分中。这意味着你可以获得语法高亮，CSS 支持以及更容易使用预处理器（如 Jade 或 SCSS）。我已经阅读过其他文章，JSX 更容易调试，因为 Vue 不会显示不规范 HTML 的语法错误。这是不正确的，因为 Vue 转换 HTML 来渲染函数 - 所以错误显示没有问题（感谢 Vinicius Reis 的评论和更正！）。

旁注：如果你喜欢 JSX 的思路，并想在 Vue 中使用它，可以使用 babel-plugin-transform-vue-jsx。

框架和库

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

另一方面，React 和 Vue 是很灵活的。他们的库可以和各种包搭配。（在 npm 上有很多 React 的包，但 Vue 的包比较少，因为毕竟这个框架还比较新）。有了 React，你甚至可以交换库本身的 API 兼容替代品，如 Inferno。然而，灵活性越大，责任就越大 - React 没有规则和有限的指导。每个项目都需要决定架构，而且事情可能更容易出错。

另一方面，Angular 还有一个令人困惑的构建工具，样板，检查器（linter）和时间片来处理。如果使用项目初始套件或样板，React 也是如此。他们自然是非常有帮助的，但是 React 可以开箱即用，这也许是你应该学习的方式。有时，在 JavaScript 环境中工作要使用各种工具被称为 “Javascript 疲劳症”。Eric Clemmons 在他的文章 中说：

当开始使用框架，还有一堆安装的工具，你可能会不习惯。这些都是框架生成的。很多开发人员不明白，框架内部发生了什么 —— 或者需要花费很多时间才能搞明白。

Vue 似乎是三个框架中最轻量的。GitLab 有一篇关于 Vue.js（2016 年 10 月）的决定的博客文章：

Vue.js 完美的兼顾了它将为你做什么和你需要做什么。（…）Vue.js 始终是可及的，一个坚固，但灵活的安全网，保证编程效率和把操作 DOM 造成的痛苦降到最低。

他们喜欢简单易用 —— 源代码非常易读，不需要任何文档或外部库。一切都非常简单。Vue.js “对任何东西都不做大的假设”。还有一个关于 GitLab 决定的播客节目。

另一个来自 Pixeljets 的关于向 Vue 转变的博文。React “是 JS 界在意识层面向前迈出的一大步，它以一种实用简洁的方式向人们展示了真正的函数式编程。和 Vue 相比，React 的一大缺点是由于 JSX 的限制，组件的粒度会更小。这里是文章的引述：

对于我和我的团队来说，代码的可读性是很重要的，但编写代码很有趣也是非常重要的。在实现真正简单的计算器小部件时创建 6 个组件并不奇怪。在许多情况下，在维护，修改或对某个小部件进行可视化检查方面也是不好的，因为你需要绕过多个文件/函数并分别检查每个小块的 HTML。再次，我不是建议写巨石 - 我建议在日常开发中使用组件而不是微组件。

关于 Hacker news 和 Reddit 上的博客文章有趣的讨论 - 有来自 Vue 的持异议者和进一步支持者的争论。

状态管理和数据绑定

构建用户界面很困难，因为处处都有状态 - 随着时间的推移而变化的数据带来了复杂性。定义的状态工作流程对于应用程序的增长和复杂性有很大的帮助。对于复杂度不大的应用程序，就不必定义的状态流了，像原生 JS 就足够了。

它是如何工作的？组件在任何时间点描述 UI。当数据改变时，框架重新渲染整个 UI 组件 - 显示的数据始终是最新的。我们可以把这个概念称为“ UI 即功能”。

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

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

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

大多数教程和样板文件都已经集成了 Redux，但是如果没有它，你可以使用 React（你可能不需要在你的项目中使用 Redux）。Redux 在代码中引入了复杂性和相当强的约束。如果你正在学习React，那么在你要使用 Redux 之前，你应该考虑学习纯粹的 React。你绝对应该阅读 Dan Abramov 的“你可能不需要 Redux”。

有些开发人员 建议使用 Mobx 代替 Redux。你可以把它看作是一个 “自动的 Redux”，这使得事情一开始就更容易使用和理解。如果你想了解，你应该从介绍开始。你也可以阅读 Robin 的 Redux 和 MobX 的比较。他还提供了有关从 Redux 迁移到 MobX 的信息。如果你想查找其他 Flux 库，这个列表非常有用。如果你是来自 MVC 的世界，那么你应该阅读 Mikhail Levkovsky 的文章“Redux 中的思考（当你所知道的是 MVC）”。

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

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

这两个概念各有优劣。你需要了解这些概念，并确定这是否会影响你选择框架。文章“双向数据绑定：Angular 2 和 React”和这个 Stackoverflow 上的问题都提供了一个很好的解释。在这里你可以找到一些交互式的代码示例（3 年前的示例（，只适用于 Angular 1 和 React）。最后，Vue 支持单向绑定和双向绑定（默认为单向绑定）。

如果你想进一步阅读，这有一篇长文，是有关状态的不同类型和 Angular 应用程序中的状态管理（Victor Savkin）。

其他的编程概念

Angular 包含依赖注入（dependency injection），即一个对象将依赖项（服务）提供给另一个对象（客户端）的模式。这导致更多的灵活性和更干净的代码。文章 “理解依赖注入” 更详细地解释了这个概念。

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

灵活性与精简到微服务

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

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

正如 Cory House 所说:

JavaScript 发展速度很快，而且 React 可以让你将应用程序的一小部分替换成更好用的 JS 库，而不是期待你的框架能够创新。小巧，可组合的单一用途工具的理念永远不会过时。

有些人对非单页的网站也使用 React（例如复杂的表单或向导）。甚至 Facebook 都没有把 React 用在 Facebook 的主页，而是用在特定的页面，实现特定的功能。

体积和性能

任何框架都不会十全十美：Angular 框架非常臃肿。gzip 文件大小为 143k，而 Vue 为 23K，React 为 43k。

为了提高性能，React 和 Vue 都使用了虚拟 DOM（Virtual DOM）。如果你对此感兴趣，可以阅读虚拟 DOM 和 DOM 之间的差异以及 react.js 中虚拟 DOM 的实际优势。此外，虚拟 DOM 的作者之一在 Stackoverflow 上回答了性能的相关问题。

为了检查性能，我看了一下最佳的 js 框架基准。你可以自己下载并运行它，或者查看交互式结果表。

Angular，React 和 Vue 性能比较（源文件）

内存分配（源文件）

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

测试

Facebook 使用 Jest 来测试其 React 代码。这里有篇 Jest 和 Mocha 之间的比较的文章 —— 还有一篇关于 Enzyme 和 Mocha 如何一起使用 的文章。Enzyme 是 Airbnb 使用的 JavaScript 测试工具（与 Jest，Karma 和其他测试框架一起使用）。如果你想了解更多，有一些关于在 React（这里和这里）测试的旧文章。

Angular 2 中使用 Jasmine 作为测试框架。Eric Elliott 在一篇文章中抱怨说 Jasmine “有数百种测试和断言的方式，需要仔细阅读每一个，来了解它在做什么”。输出也是非常臃肿和难以阅读。有关 Angular 2 与 Karma 和 Mocha 的整合的一些有用的文章。这里有一个关于 Angular 2 测试策略的旧视频（从2015年起）。

Vue 缺乏测试指导，但是 Evan 在 2017 年的展望中写道，团队计划在这方面开展工作。他们推荐使用 Karma。Vue 和 Jest 结合使用，还有 avoriaz 作为测试工具。

通用与原生 app

通用 app 正在将应用程序引入 web、搬上桌面，同样将深入原生 app 的世界。

React 和 Angular 都支持原生开发。Angular 拥有用于原生应用的 NativeScript（由 Telerik 支持）和用于混合开发的 Ionic 框架。借助 React，你可以试试 react-native-renderer 来构建跨平台的 iOS 和 Android 应用程序，或者用 react-native 开发原生 app。许多 app（包括 Facebook；查看更多的展示）都是用 react-native 构建的。

Javascript 框架在客户端上渲染页面。这对于性能，整体用户体验和 SEO 是不利的。服务器端预渲染是一个好办法。所有这三个框架都有相应的库来实现服务端渲染。React 有 next.js，Vue 有 nuxt.js，而 Angular 有… Angular Universal。

学习曲线

Angular 的学习曲线确实很陡。它有全面的文档，但你仍然可能被吓哭，因为说起来容易做起来难。即使你对 Javascript 有深入的了解，也需要了解框架的底层原理。去初始化项目是很神奇的，它会引入很多的包和代码。因为有一个大的，预先存在的生态系统，你需要随着时间的推移学习，这很不利。另一方面，由于已经做出了很多决定，所以在特定情况下可能会很好。对于 React，你可能需要针对第三方库进行大量重大决策。仅仅 React 中就有 16 种不同的 flux 软件包来用于状态管理可供选择。

Vue 学习起来很容易。公司转向 Vue 是因为它对初级开发者来说似乎更容易一些。这里有一片说他们团队为什么从 Angular 转到 Vue的文章。另一位用户表示，他公司的 React 应用程序非常复杂，以至于新开发人员无法跟上代码。有了 Vue，初级和高级开发人员之间的差距缩小了，他们可以更轻松地协作，减少 bug，减少解决问题的时间。

有些人说他们用 React 做的东西比用 Vue 做的更好。如果你是一个没有经验的 Javascript 开发人员 - 或者如果你在过去十年中主要使用 jQuery，那么你应该考虑使用 Vue。转向 React 时，思维方式的转换更为明显。Vue 看起来更像是简单的 Javascript，同时也引入了一些新的概念：组件，事件驱动模型和单向数据流。这同样是很小的部分。

同时，Angular 和 React 也有自己的实现方式。它们可能会限制你，因为你需要调整自己的做法，才能顺畅的开发。这可能是一个缺点，因为你不能随心所欲，而且学习曲线陡峭。这也可能是一个好处，因为你在学习技术时必须学习正确的概念。用 Vue，你可以用老方法来做。这一开始可能会比较容易上手，但长此以往会出现问题。

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

Angular, React 和 Vue 底层原理

你想自己阅读源代码吗？你想看看事情到底是怎么样的吗？

可能首先要查看 Github 仓库: React（github.com/facebook/re…）、Angular（github.com/angular/ang…）和 Vue（github.com/vuejs/vue）。

语法看起来怎么样？ValueCoders 比较 Angular，React 和 Vue 的语法。

在生产环境中查看也很容易 —— 连同底层的源代码。TodoMVC 列出了几十个相同的 Todo 应用程序，用不同的 Javascript 框架编写 —— 你可以比较 Angular，React 和 Vue 的解决方案。RealWorld 创建了一个真实世界的应用程序（中仿），他们已经准备好了 Angular（4+）和 React（带 Redux ）的解决方案。Vue 的开发正在进行中。

你可以看到许多真实的 app，以下是 React 的方案：

• Do（一款很好用的笔记管理 app，用 React 和 Redux 实现）
• sound-redux（用 React 和 Redux 实现的 Soundcloud 客户端）
• Brainfock（用 React 实现的项目和团队管理解决方案）
• react-hn 和 react-news（仿 Hacker news）
• react-native-whatsapp-ui 和 教程（仿 Whatsapp 的 react-native 版）
• phoenix-trello（仿 Trello）
• slack-clone 和其他教程 (仿Slack)

以下是 Angular 版的 app：

• angular2-hn 和 hn-ng2（仿 Hacker News，另一个由 Ashwin Sureshkumar 创建的很好的教程）
• Redux-and-angular-2（仿 Twitter）

以下是 Vue 版的 app：

• vue-hackernews-2.0 和 Loopa news（仿Hacker News）
• vue-soundcloud（Soundcloud 演示）

总结

现在决定使用哪个框架

React，Angular 和 Vue 都很酷，而且没有一个能明显的超过对方。相信你的直觉。最后一点有趣的玩世不恭的言辞可能会有助于你的决定：

这个肮脏的小秘密就是大多数 “现代 JavaScript 开发” 与实际构建网站无关 —— 它正在构建可供构建可供人们使用的库或者包，这些人可以为编写教程和教授课程的人构建框架。我不确定任何人实际上正在为实际用户建立任何交互。

当然，这是夸张的，但是可能有一点点道理。是的，Javascript生态系统中有很多杂音。在你搜索的过程中，你可能会发现很多其他有吸引力的选项 —— 尽量不要被最新，最闪亮的框架蒙蔽。

我应该选什么？

如果你在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。

二：不同的理解与分析

前端这几年的技术发展很快，细分下来，主要可以分成四个方面：

1. 开发语言技术，主要是ES6&7，coffeescript，typescript等；
2. 开发框架，如Angular，React,Vue.js，Angular2等；
3. 开发工具的丰富和前端工程化，像Grunt，Gulp，Webpack，npm，eslint，mocha这些技术；
   就开发框架这块，Angular(1&2),React,Vue目前占据着主流地位而且会相持比较长的一段时间，所以这里对比一下这三门技术，以便之后的技术选型。

一. 趋势

Vue.js

Reactjs

Angularjs

2.对比
虽然放在一起Angular还是最火的，但从单个趋势图可以看出来reactjs和vuejs明显是火箭一般上升。很明显可以看到Angular在16时候有个大跌幅，那时候正是React坐火箭上升最快的。就是那时候很多Angular的项目转成了React。如果Angular没有出2，那估计Angular就真的离灭亡不远了。

3.GitHub受欢迎程度

文末

如果30岁以前，可以还不知道自己想去做什么的话，那30岁之后，真的觉得时间非常的宝贵，不能再浪费时间在一些碎片化的事情上，比如说看综艺，电视剧。一个人的黄金时间也就二，三十年，不能过得浑浑噩噩。所以花了基本上休息的时间，去不断的完善自己的知识体系，希望可以成为一个领域内的TOP。

同样是干到30岁，普通人写业务代码划水，榜样们深度学习拓宽视野晋升管理。

这也是为什么大家都说30岁是程序员的门槛，很多人迈不过去，其实各行各业都是这样都会有个坎，公司永远都缺的高级人才，只用这样才能在大风大浪过后，依然闪耀不被公司淘汰不被社会淘汰。

269页《前端大厂面试宝典》

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

前端面试题汇总

JavaScript

说30岁是程序员的门槛，很多人迈不过去，其实各行各业都是这样都会有个坎，公司永远都缺的高级人才，只用这样才能在大风大浪过后，依然闪耀不被公司淘汰不被社会淘汰。

269页《前端大厂面试宝典》

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

前端面试题汇总

JavaScript