React Vue Angular对比

目前，主流前端框架三分天下，主要有React Vue Angular。都有各自的特色，如下简单介绍一下。

 

 

1.数据流

数据绑定

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

实现原理

　　$scope变量中使用脏值检查来实现。像ember.js是基于setter，getter的观测机制，$scope.$watch函数，监视一个变量的变化。函数有三参数，”要观察什么”，”在变化时要发生什么”,以及你要监视的是一个变量仍是一个对象。使用ng-model时，你可使用双向数据绑定。 使用$scope.$watch（视图到模型）以及$scope.$apply（模型到视图），还有$scope.$digest调用$scope.$watch时只为它传递了一个参数，不管做用域中的什么东西发生了变化，这个函数都会被调用。在ng-model中，这个函数被用来检查模型和视图有没有同步，若是没有同步，它将会使用新值来更新模型数据。

实现双向绑定的三个重要方法：

$scope.$apply()

$scope.$digest()

$scope.$watch()

在Angular双向绑定中，有2个很重要的概念叫作dirty check，digest loop，dirty check（脏检测）是用来检查绑定的scope中的对象的状态的，例如，在js里建立了一个对象，而且把这个对象绑定在scope下，这样这个对象就处于digest loop中，loop经过遍历这些对象来发现他们是否改变，若是改变就会调用相应的处理方法来实现双向绑定

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

 脏检测的利弊

和Vue相比（劣）：

Vue.js 有更好的性能，而且很是很是容易优化，由于它不使用脏检查。Angular，当 watcher 愈来愈多时会变得愈来愈慢，由于做用域内的每一次变化，全部 watcher 都要从新计算。而且，若是一些 watcher 触发另外一个更新，脏检查循环（digest cycle）可能要运行屡次。 Angular 用户经常要使用深奥的技术，以解决脏检查循环的问题。有时没有简单的办法来优化有大量 watcher 的做用域。Vue.js 则根本没有这个问题，由于它使用基于依赖追踪的观察系统而且异步列队更新，全部的数据变化都是独立地触发，除非它们之间有明确的依赖关系。惟一须要作的优化是在 v-for 上使用 track-by。

 

React-单向数据流

　　MVVM流的Angular和Vue，都是经过相似模板的语法，描述界面状态与数据的绑定关系，而后经过内部转换，把这个结构创建起来，当界面发生变化的时候，按照配置规则去更新相应的数据，而后，再根据配置好的规则去，从数据更新界面状态。

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

React和Vue均可以配合Redux来管理状态数据

 

2.视图渲染

Angular

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

React

　　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.学习成本

　　Angular的学习成本较高,Angular 2中，它的开始指南中所用的就有 ES2015 标准的 JavaScript，18个 NPM 依赖包，4 个文件和超过 3 千多字的介绍，这一切都是为了完成个 Hello World，甚至须要掌握TypeScript。Vue与React则是简简单的使用方法，便于刚入门的人员学习。React使用了JSX语法特性，可是React全部的内容都跟嵌套在js中，而在js中维护大量Html与Css是一件很痛苦的事儿。而Vue则无需学习新的语法特性，传统的js语法与html便可使用。Angular入门使用难度稍高。所以从上手容易度来讲，Vue是最简单易用的。Angular与Vue都具有数据双向绑定的功能，这在在最经常使用的取值,以及dom操做中，可以大大减小开发人员的工做量以及出错几率。

语法与用法　

　　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 的单文件组件格式

　　React的Demo使用

　　

　　Vue的Demo使用

 

4.性能优化

　　在绝大部分常见页面中，他们的表现相差不大。在大小方面，虽然 Angular 2 使代码体积减少了许多，但包含编译器和所有功能的 Vue2(23kb) 相比 Angular 2(50kb) 仍是要小的多。并且，用 Angular 2 的 App 的体积缩减是使用了 tree-shaking 移除了那些框架中没有用到的功能，但随着功能引入的不断增多，尺寸会变得愈来愈大。React通常则须要引入至少两个文件，且体积几乎是Vue两倍。所以对于网络较为珍贵的传输中，Vue更占优点。在运行速度上，Vue与React都采用了虚拟Dom的方式，先进行差别化计算，得出最小的修改dom的节点再进行对真实Dom的操做，性能更高。而Vue与React通过测试，一样Vue更快。在应用的状态(数据)发生变化后，Vue与React都提供了各自的算法进行Dom的同步。Vue的核心开发者提供了一个benchmark测试，测试方法是将含有10000个项目的列表渲染100次，结果以下图

 

5.生态

　　React由FaceBook于2013年开源并维护。

　　Angular诞生与2009年，其后由Google收购维护。

　　Vue由我的尤雨溪开发维护。从最初的生态来说，Angular与React有大公司做为支持，且有不少文档与项目，生态圈更为庞大。以后的Vue发展迅猛，其设计目的，是为了简约实用原则，够小够强大，所以 受到了更多人的使用。如今的Vue生态圈在迅速发展。而对于他们的选择上，若是有较多重复代码，或者须要使用模板，倾向于能用，简单就好，或者想要更轻快，选择Vue更为合适。若是须要构建大型应用，或者为了在不一样平台Android，IOS都使用同一套代码，建议使用React Native。

 

 

通过综合对比，从使用的容易度，性能，以及之后的发展，建议使用vue进行开发。