react、vue、Angular的关系和区别

历史背景

Angular 是基于 TypeScript 的 Javascript 框架。由 Google 进行开发和维护，它被描述为“超级厉害的 JavaScript MVW 框架”。

Angular（也被称为 “Angular 2+”，“Angular 2” 或者 “ng2”）已被重写，是与 AngularJS（也被称为 “Angular.js” 或 “AngularJS 1.x”）不兼容的后续版本。当 AngularJS（旧版本）最初于2010年10月发布时，仍然在修复 bug，等等 —— 新的 Angular（sans JS）于 2016 年 9 月推出版本 2。最新的主版本是 4，因为版本 3 被跳过了。Google，Vine，Wix，Udemy，weather.com，healthcare.gov 和 Forbes 都使用 Angular（根据 madewithangular，stackshare 和 libscore.com 提供的数据）。

React 被描述为 “用于构建用户界面的 JavaScript 库”。

React 最初于 2013 年 3 月发布，由 Facebook 进行开发和维护，Facebook 在多个页面上使用 React 组件（但不是作为单页应用程序）。根据 Chris Cordle 这篇文章的统计，React 在 Facebook 上的使用远远多于 Angular 在 Google 上的使用。React 还被 Airbnb，Uber，Netflix，Twitter，Pinterest，Reddit，Udemy，Wix，Paypal，Imgur，Feedly，Stripe，Tumblr，Walmart 等使用（根据 Facebook, stackshare 和 libscore.com 提供的数据）。

Facebook 正在开发 React Fiber。它会改变 React 的底层 - 渲染速度应该会更快 - 但是在变化之后，版本会向后兼容。Facebook 将会在 2017 年 4 月的开发者大会上讨论新变化，并发布一篇非官方的关于新架构的文章。React Fiber 可能与 React 16 一起发布。

Vue 是 2016 年发展最为迅速的 JS 框架之一。

Vue 将自己描述为一款“用于构建直观，快速和组件化交互式界面的 MVVM 框架”。

Vue 是 2016 年发展最为迅速的 JS 框架之一。Vue 将自己描述为一款“用于构建直观，快速和组件化交互式界面的 MVVM 框架”。它于 2014 年 2 月首次由 Google 前员工 Evan You 发布（顺便说一句：尤雨溪那时候发表了一篇 vue 发布首周的营销活动和数据的博客文章）。尤其是考虑到 Vue 在没有大公司的支持的情况下，作为一个人开发的框架还能获得这么多的吸引力，这无疑是非常成功的。尤雨溪目前有一个包含数十名核心开发者的团队。2016 年，版本 2 发布。Vue 被阿里巴巴，百度，Expedia，任天堂，GitLab 使用 一，架构思想。

anjular是MVC

M - Model 数据：数据实体,用来保存页面要展示的数据。比如ajax获取的数据。

V - View 视图，显示数据的页面，一般为html。

C - Controller 控制器： 控制整个业务逻辑,负责处理数据,比如数据的获取,以及数据的过滤，进而影响数据在视图上的展示。

执行原理：

vue是MVVM

M - Model 数据：它是与应用程序的业务逻辑相关的数据的封装载体

V - View 视图：它专注于界面的显示和渲染

VM - ViewModel 视图-数据：它是View和Model的粘合体，负责View和Model的交互和协作

双向数据绑定

一是将【模型】转化成【视图】，即将数据转化成所看到的页面。

二是将【视图】转化成【模型】，即将所看到的页面转化成数据。实现的方式是：DOM 事件监听。

react是V

react是一个用于构建组件化UI的库，是一个前端界面开发工具。所以顶多算是MVC中的V（view）。

二，数据流

Angular 使用双向绑定即：界面的操作能实时反映到数据，数据的变更能实时展现到界面。

Vue 也支持双向绑定，默认为单向绑定，数据从父组件单向传给子组件。在大型应用中使用单向绑定让数据流易于理解

React推崇的是函数式编程和单向数据流：给定原始界面（或数据），施加一个变化，就能推导出另外一个状态（界面或者数据的更新）。

三，视图渲染

Angular的工作原理是:HTML模板将会被浏览器解析到DOM中, DOM结构成为AngularJS编译器的输入。AngularJS将会遍历DOM模板, 来生成相应的NG指令,所有的指令都负责针对view(即HTML中的ng-model)来设置数据绑定。因此, NG框架是在DOM加载完成之后, 才开始起作用的。

React 的渲染建立在 Virtual DOM 上它是一种在内存中描述 DOM 树状态的数据结构。当状态发生变化时，React 重新渲染 Virtual DOM，比较计算之后给真实 DOM 打补丁。

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

四，性能与优化

性能方面，这几个主流框架都应该可以轻松应付大部分常见场景的性能需求，区别在于可优化性和优化对于开发体验的影响。Vue 的话需要加好 track-by 。React 需要 shouldComponentUpdate 或者全面 Immutable，Angular 2 需要手动指定 change detection strategy。从整体趋势上来说，浏览器和手机还会越变越快，框架本身的渲染性能在整个前端性能优化体系中，会渐渐淡化，更多的优化点还是在构建方式、缓存、图片加载、网络链路、HTTP/2 等方面。

四，模块化组件化

Angular1使用依赖注入来解决模块之间的依赖问题，模块几乎都依赖于注入容器以及其他相关功能。不是异步加载的，根据依赖列出第一次加载所需的所有依赖。

可以配合类似于Require.js来实现异步加载，懒加载（按需加载）则是借助于 ocLazyLoad 方式的解决方案，但是理想情况下应该是本地框架会更易懂。

Angular2使用ES6的module来定义模块，也考虑了动态加载的需求。

Vue中指令和组件分得更清晰。指令只封装 DOM 操作，而组件代表一个自给自足的独立单元 —— 有自己的视图和数据逻辑**。在 Angular1 中两者有不少相混的地方。

一个 React 应用就是构建在 React 组件之上的。 
组件有两个核心概念：props,state。 
一个组件就是通过这两个属性的值在 render 方法里面生成这个组件对应的 HTML 结构。

传统的 MVC 是将模板放在其他地方，比如 script 标签或者模板文件，再在 JS 中通过某种手段引用模板。按这种思路，想想多少次我们面对四处分散的模板片段不知所措？纠结模板引擎，纠结模板存放位置，纠结如何引用模板。

React 认为组件才是王道，而组件是和模板紧密关联的，组件模板和组件逻辑分离让问题复杂化了。所以就有了 JSX 这种语法，就是为了把 HTML 模板直接嵌入到 JS 代码里面，这样就做到了模板和组件关联，但是 JS 不支持这种包含 HTML 的语法，所以需要通过工具将 JSX 编译输出成 JS 代码才能使用（可以进行跨平台开发的依据，通过不同的解释器解释成不同平台上运行的代码，由此可以有RN和React开发桌面客户端）。

五，语法和代码风格

React,Vue,Angular2都支持ES6，Angular2官方拥抱了TypeScript这种 JavaScript 风格。

React 以 JavaScript 为中心，Angular 2 依然保留以 HTML 为中心。Angular 2 将 “JS” 嵌入 HTML。React 将 “HTML” 嵌入 JS。Angular 2 沿用了 Angular 1 试图让 HTML 更强大的方式。

React 推荐的做法是 JSX + inline style，也就是把 HTML 和 CSS 全都整进 JavaScript 了。Vue 的默认 API 是以简单易上手为目标，但是进阶之后推荐的是使用 webpack + vue-loader 的单文件组件格式（template,script,style写在一个vue文件里作为一个组件）

六，特点

angular具有MVC，模块化，指令系统，双向数据绑定

vue具有MVVM，轻量级的框架，双向数据绑定，指令，组件化，客户端路由，状态管理。

react具有V，单向数据流，声明式设计，高效，灵活，JSX，组件。