前端学习总结（二十三）——前端框架天下三分：Angular React 和 Vue的比较

前端这几年的技术发展很快，细分下来，主要可以分成四个方面：

1.开发语言技术，主要是ES6&7，coffeescript，typescript等；
2.开发框架，如Angular，React,Vue.js，Angular2等；
3.开发工具的丰富和前端工程化，像Grunt，Gulp，Webpack，npm，eslint，mocha这些技术；
4.前端开发范围的扩展，如服务端的nodejs,express,koa,meteor,GraphQL;移动端和跨平台的PhoneGap,ionic,ReactNative，Weex;计算机图形学和3维建模领域的WebGL(three.js等)；可视化与数据分析领域的d3.js等；包括浏览器不断开放的更多新特性和接口比如svg,canvas,蓝牙，电池，本地存储，service worker，Houdini等新的API能力，以及像WASM这样的底层优化技术；

就开发框架这块，Angular(1&2),React,Vue目前占据着主流地位而且会相持比较长的一段时间，所以这里对比一下这三门技术，以便之后的技术选型。

一数据流

数据绑定

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()

在angularjs双向绑定中，有2个很重要的概念叫做dirty check，digest loop，dirty check（脏检测）是用来检查绑定的scope中的对象的状态的，例如，在js里创建了一个对象，并且把这个对象绑定在scope下，这样这个对象就处于digest loop中，loop通过遍历这些对象来