2024年最新angular和vue和react的区别_vue react angular，阿里P8架构师的前端大厂面试题总结_angular react vue 2024

最后

编程基础的初级开发者，计算机科学专业的学生，以及平时没怎么利用过数据结构与算法的开发人员希望复习这些概念为下次技术面试做准备。或者想学习一些计算机科学的基本概念，以优化代码，提高编程技能。这份笔记都是可以作为参考的。

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

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受欢迎程度

4.定位
虽然Vue.js被定义为MVC framework，但其实Vue本身还是一个library，加了一些其他的工具，可以被当成一个framework。ReactJS也是library，同样道理，配合工具也可以成为一个framework。AngularJS（本文AngularJS特指Angular 1， Angular 2特指第二版Angular）是一个framework，而Angular 2虽然还是一个framework，但其实在设计之初，Angular 2的团队站在了更高的角度，希望做一个platform。
5.上手容易度
Vue.js hello world

ReactJS hello world

** 6.文档清晰度**
现在的前端framework，用起来就像按照说明书使用家用电器一样。按照文档一步步写就好了，所以文档的清晰度非常重要。同时小伙伴也很重要，越多的人使用，那遇到一样问题的人就越多，stackoverflow上面可能早就有帮你解决问题的小伙伴了。就这几个来说，我个人认为Vue.js的文档最恳切。我认为结合文档和遇到问题Google答案的匹配度来讲：

Vue.js > ReactJS > AngularJS > Angular 2

二. 数据流

1.Angular 使用双向绑定即：界面的操作能实时反映到数据，数据的变更能实时展现到界面。
实现原理：
$scope
变量中使用脏值检查来实现。像ember.js是基于setter，getter的观测机制，
$scope.$watch
函数，监视一个变量的变化。函数有三参数，”要观察什么”，”在变化时要发生什么”,以及你要监视的是一个变量还是一个对象。
使用ng-model时，你可以使用双向数据绑定。 使用$scope.$watch
（视图到模型）以及$scope.$apply
（模型到视图），还有$scope.$digest
双向绑定的三个重要方法：
$scope.$apply()$scope.$digest()$scope.$watch()
在AngularJS双向绑定中，有2个很重要的概念叫做dirty check，digest loop，dirty check（脏检测）是用来检查绑定的scope中的对象的状态的，例如，在js里创建了一个对象，并且把这个对象绑定在scope下，这样这个对象就处于digest loop中，loop通过遍历这些对象来发现他们是否改变，如果改变就会**调用相应的处理方法来实现双向绑定。

1. Vue 也支持双向绑定，默认为单向绑定，数据从父组件单向传给子组件。在大型应用中使用单向绑定让数据流易于理解。
   和Vue相比（劣）：
   Vue.js 有更好的性能，并且非常非常容易优化，因为它不使用脏检查。Angular，当 watcher 越来越多时会变得越来越慢，因为作用域内的每一次变化，所有 watcher 都要重新计算。
   并且，如果一些 watcher 触发另一个更新，脏检查循环（digest cycle）可能要运行多次。 Angular 用户常常要使用深奥的技术，以解决脏检查循环的问题。有时没有简单的办法来优化有大量 watcher 的作用域。
   Vue.js 则根本没有这个问题，因为它使用基于依赖追踪的观察系统并且异步列队更新，所有的数据变化都是独立地触发，除非它们之间有明确的依赖关系。唯一需要做的优化是在 v-for 上使用 track-by。
2. React-单向数据流
   MVVM流的Angular和Vue，都是通过类似模板的语法，描述界面状态与数据的绑定关系，然后通过内部转换，把这个结构建立起来，当界面发生变化的时候，按照配置规则去更新相应的数据，然后，再根据配置好的规则去，从数据更新界面状态。
   React推崇的是函数式编程和单向数据流：给定原始界面（或数据），施加一个变化，就能推导出另外一个状态（界面或者数据的更新）。
   React和Vue都可以配合Redux来管理状态数据。

三. 视图渲染

1. AngularJS的工作原理是:HTML模板将会被浏览器解析到DOM中, DOM结构成为AngularJS编译器的输入。AngularJS将会遍历DOM模板, 来生成相应的NG指令,所有的指令都负责针对view(即HTML中的ng-model)来设置数据绑定。因此, NG框架是在DOM加载完成之后, 才开始起作用的。
   React
2. React 的渲染建立在 Virtual DOM 上——一种在内存中描述 DOM 树状态的数据结构。当状态发生变化时，React 重新渲染 Virtual DOM，比较计算之后给真实 DOM 打补丁。
   Virtual DOM 提供了函数式的方法描述视图，它不使用数据观察机制，每次更新都会重新渲染整个应用，因此从定义上保证了视图与数据的同步。它也开辟了 JavaScript 同构应用的可能性。
   在超大量数据的首屏渲染速度上，React 有一定优势，因为 Vue 的渲染机制启动时候要做的工作比较多，而且 React 支持服务端渲染。
   React 的 Virtual DOM 也需要优化。复杂的应用里可以选择 1. 手动添加 shouldComponentUpdate 来避免不需要的 vdom re-render；2. Components 尽可能都用 pureRenderMixin，然后采用 Flux 结构 + Immutable.js。其实也不是那么简单的。相比之下，Vue 由于采用依赖追踪，默认就是优化状态：动了多少数据，就触发多少更新，不多也不少。
   React 和 Angular 2 都有服务端渲染和原生渲染的功能。
3. Vue.js 不使用 Virtual DOM 而是使用真实 DOM 作为模板，数据绑定到真实节点。Vue.js 的应用环境必须提供 DOM。Vue.js 有时性能会比 React 好，而且几乎不用手工优化。

最后

编程基础的初级开发者，计算机科学专业的学生，以及平时没怎么利用过数据结构与算法的开发人员希望复习这些概念为下次技术面试做准备。或者想学习一些计算机科学的基本概念，以优化代码，提高编程技能。这份笔记都是可以作为参考的。

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

ue.js** 不使用 Virtual DOM 而是使用真实 DOM 作为模板，数据绑定到真实节点。Vue.js 的应用环境必须提供 DOM。Vue.js 有时性能会比 React 好，而且几乎不用手工优化。

最后

编程基础的初级开发者，计算机科学专业的学生，以及平时没怎么利用过数据结构与算法的开发人员希望复习这些概念为下次技术面试做准备。或者想学习一些计算机科学的基本概念，以优化代码，提高编程技能。这份笔记都是可以作为参考的。

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