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 ElliottAngular 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 House2016 年 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 newsReddit 上的博客文章有趣的讨论 - 有来自 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 与 KarmaMocha 的整合的一些有用的文章。这里有一个关于 Angular 2 测试策略的旧视频(从2015年起)。

Vue 缺乏测试指导,但是 Evan 在 2017 年的展望中写道,团队计划在这方面开展工作。他们推荐使用 KarmaVue 和 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 框架编写 —— 你可以比较 AngularReactVue 的解决方案。RealWorld 创建了一个真实世界的应用程序(中仿),他们已经准备好了 Angular(4+)和 React(带 Redux )的解决方案。Vue 的开发正在进行中。

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

以下是 Angular 版的 app:

以下是 Vue 版的 app:

总结

现在决定使用哪个框架

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

  • 11
    点赞
  • 27
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值