vue, react, angular优缺点

不同点：

vue   控制器：无；过滤器 ：无 ；指令：有；渲染指令： 有 ；数据绑定：双向；

React   控制器：无；过滤器 ：无 ；指令：无；渲染指令 ： 无 ；数据绑定：单向；

angular 控制器：有；过滤器 ：有 ；指令：有；渲染指令 ： 有 ；数据绑定：双向；

相同点：
都是操作虚拟DOM（真实的dom，转换js对象树）
   学习思想：数据驱动

 

一、为什么前端会被vue,angular,react瓜分？

  不知道大家有没有发现，这三个框架除了都是前端框架之外，还大有搞基的成分存在。注意他们三个的名字，分别以v，a，r 开头，我这么一说，你是不是忽然间就想到了什么。哈哈，正是如此，将他们组合起来不就是javascript中无处不在的鬼东西么？var (当然纯属于开玩笑的)   var关键字，是js的变量声明关键字，可以说，它是js得以运行的核心关键字，因为要想一段代码运行，首先得有各种变量和逻辑判断做支撑，而在es6之前，js能声明变量的，就它一个。这似乎也是暗示了vue，angularjs，react这三个框架的不可替代性啊，也不知道当时这三个框架的作者起名时的想表达的特殊含义是什么，但偏偏就刚好对上了。当然，反过来说，也有可能是起var关键字的这个人，当时考虑得面面俱到。虽然看上去是巧合，但我总感觉这之中总有一种道不明的关系。虽然vue是后起之秀，但就目前的受欢迎程度来说，好像就是这个顺序，至少国内现在肯定是这样的。   有了这三个框架之后，我们告别了以前jquery面条式的代码，也摆脱了到处操作dom元素带来的繁琐，模块业务划分更清晰。这三个框架的出现，不仅让前端的工作得以高效，也让后端省了不少事，比如，路由控制。在以前，干后端是对决要比前端高一个档次的，但现在，完全不一样了。如果有一个牛逼的前端，后端差不多只需要会增删改查的基本业务就能完全搞定一个web应用。当然，这里只是针对代码部分，搭建服务器之类的另当别论。

二、三大框架的优缺点

  我们主要从数据流、视图渲染、性能与优化、模块化组件化等四个方面来作比较

1、数据流

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

1.1、它的实现原理：

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

 

 

vue 
API设计上简单，语法简单，学习成本低 
构建方面不包含路由和ajax功能，使用vuex, vue-router 
指令（dom）和组件（视图，数据，逻辑）处理清晰 
性能好，容易优化 
基于依赖追踪的观察系统，并且异步队列更新 
独立触发 
v-model 实时渲染

适用于：模板和渲染函数的弹性选择 
简单的语法及项目搭建 
更快的渲染速度和更小的体积

---

react 
利用jsx创建虚拟dom 
是一种在内存中描述dom数状态的数据结构 
函数式的方法描述视图 
使用虚拟dom作为模板 
程序片段 
不好控制dom 
生命周期 
服务端渲染：react的虚拟dom的生成可以在任何支持js的环境生成的，所以可以在node环境生成，直接转为string,然后插入到html文件中输出浏览器便可 
适用于：大型应用和更好的可测试性；同时适用于web端和原生app;更大的生态圈

优点

React伟大之处就在于，提出了Virtual Dom这种新颖的思路，并且这种思路衍生出了React Native，有可能会统一Web/Native开发。在性能方面，由于运用了Virtual Dom技术，Reactjs只在调用setState的时候会更新dom，而且还是先更新Virtual Dom，然后和实际Dom比较，最后再更新实际Dom。这个过程比起Angularjs的bind方式来说，一是更新dom的次数少，二是更新dom的内容少，速度肯定快 
ReactJS更关注UI的组件化，和数据的单向更新，提出了FLUX架构的新概念，现在React可以直接用Js ES6语法了，然后通过webpack编译成浏览器兼容的ES5，开发效率上有些优势. 
React Native生成的App不是运行在WebView上，而是系统原生的UI，React通过jsx生成系统原生的UI，iOS和Android的React UI组件还是比较相似的，大量代码可以复用 
维护UI的状态,Angular 里面使用的是 $scope，在 React 里面使用的是 this.setState。 而 React 的好处在于，它更简单直观。所有的状态改变都只有唯一一个入口 this.setState()，Angular 就比较复杂，不知道背后使用了哪些黑魔法。 
同构的JavaScript 
单页面JS应用程序的最大缺陷在于对搜索引擎的索引有很大限制。React对此有了解决方案。 
React可以在服务器上预渲染应用再发送到客户端。它可以从预渲染的静态内容中恢复一样的记录到动态应用程序中。 
因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行，预渲染你的应用有助于搜索引擎优化。 
缺点

React是目标是UI组件，通常可以和其它框架组合使用，目前并不适合单独做一个完整的框架。React 即使配上 redux 的组合，也不能称之一个完整的框架，比如你想用Promise化的AJAX？对不起没有，自己找现成的库去。而且第三方组件远远不如Angular多。目前在大的稳定的项目上采用React的，我也就只知道有Yahoo的Email。React本身只是一个V而已，所以如果是大型项目想要一套完整的框架的话，也许还需要引入Redux和route相关的东西。而Angular在这方面提供的东西比React多多了.

---

angular 
优点

AngularJS是一套完整的框架，angular有自带的数据绑定、render渲染、angularUI库,过滤器,directive(模板),服务q(defer),http，inject(依赖注入),factory,provider……，等等一系列工具，基本上只要你在做web开发用过的东西，它都有一个。但是这些东西React自身都没有。

Angularjs的架构清晰，分工明确，扩展性良好，model，view，controller谁在什么时候做什么事情说的很清楚，angular能够让程序员真正专注于业务逻辑，而且因为对html侵入不大，非常易于和designer协作。整个框架充满了DI的思路，耦合性非常低，对象都是被inject的，也就是说每个对象都可以轻易被替换而不影响其他对象。

Angular生产效率高，单向数据流什么的想法非常好，但是写起来太麻烦！我只想变更个很简单的数据还要经过action、dispatcher、reduce、view四步，angular里一行代码就搞定的事情在react里却如此麻烦

缺点

性能 
双向数据绑定是一把双刃剑。随着组件增加，项目越来越复杂，双向数据绑定带来性能问题。 
双向数据绑定是如何影响性能的？在JavaScript（ES5）中，并没有实现当变量或对象改变时发出通知的功能，Angular的实现方法被叫做“Dirty-checking（脏检查机制）”，通过跟踪数据的改变再动态更新用户界面（UI）。 
在Angular的作用域中任何操作的执行都会引发Dirty-checking，随着绑定数量的增加性能就会越低。 
Angular 2.0推翻重做使得目前不宜采用此框架 
Angular 1.x版本其实是个比较旧的东西了，现在看来有些理念过时了，比如依赖注入、自己独特的模块化，这些东西其实在ES6下已经很好地被解决了。 
Angular的2.0几乎是一个推翻重做的框架，估计不会有1.X的upgrade方案。所以如果现在新开始的项目采用Angular的话，会是一个很尴尬的时机。同样，如此大的改动似乎也反面印证了1.X并不是那么好。 
学习成本高 
使用Angular需要学习大量的概念，包括但不限于： 
模块 
控制器 
指令 
作用域 
模板 
链式函数 
过滤器 
依赖注入

vue,react 共性： 
虚拟dom实现快速渲染 
轻量级响应式组件 
服务端渲染易于集成路由工具，打包工具及状态管理工具