前端框架学习总结之Angular、React与Vue的⽐较详解
近⼏年前端的技术发展很快，细分下来，主要可以分成四个⽅⾯：
1.开发语⾔技术，主要是&7，coffeescript，typescript等；
2.开发，如Angular，React,Vue.js，Angular2等；
3.开发⼯具的丰富和前端⼯程化，像Grunt，，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这样的底层优化技术；
就开发框架这块，(1&2),React,Vue⽬前占据着主流地位⽽且会相持⽐较长的⼀段时间，所以这⾥对⽐⼀下这三门技术，以便之后的技术选型。
⼀、数据流
react native 数据绑定
Angular 使⽤双向绑定即：界⾯的操作能实时反映到数据，数据的变更能实时展现到界⾯。
实现原理：
$scope变量中使⽤脏值检查来实现。像ember.js是基于setter，getter的观测机制，
$scope.$watch函数，监视⼀个变量的变化。函数有三参数，”要观察什么”，”在变化时要发⽣什么”，以及你要监视的是⼀个变量还是⼀个对象。
使⽤ng-model时，你可以使⽤双向数据绑定。
使⽤$scope.$watch（视图到模型）以及$scope.$apply（模型到视图），还有$scope.$digest
调⽤$scope.$watch时只为它传递了⼀个参数，⽆论作⽤域中的什么东西发⽣了变化，这个函数都会被调⽤。在ng-model中，这个函数被⽤来检查模型和视图有没有同步，如果没有同步，它将会使⽤新值来更新模型数据。
双向绑定的三个重要⽅法：
1
2 3 4 5$scope.$apply() $scope.$digest() $scope.$watch()
在AngularJS双向绑定中，有2个很重要的概念叫做dirty check，digest loop，dirty check（脏检测）是⽤来检查绑定的scope中的对象的状态的，例如，在js⾥创建了⼀个对象，并且把这个对象绑定在scope下，这样这个对象就处于digest loop中，loop通过遍历这些对象来发现他们是否改变，如果改变就会调⽤相应的处理⽅法来实现双向绑定
Vue 也⽀持双向绑定，默认为单向绑定，数据从⽗组件单向传给⼦组件。在⼤型应⽤中使⽤单向绑定让数据流易于理解。
脏检测的利弊
和ember.js等技术的getter/setter观测机制相⽐（优）：
getter/setter当每次对DOM产⽣变更，它都要修改DOM树的结构，性能影响⼤，Angular会把批量操作延时到⼀次更新，性能相对较好。
和Vue相⽐（劣）：
Vue.js 有更好的性能，并且⾮常⾮常容易优化，因为它不使⽤脏检查。Angular，当 watcher 越来越多
时会变得越来越慢，因为作⽤域内的每⼀次变化，所有 watcher 都要重新计算。并且，如果⼀些 watcher 触发另⼀个更新，脏检查循环（digest cycle）可能要运⾏多次。Angular ⽤户常常要使⽤深奥的技术，以解决脏检查循环的问题。有时没有简单的办法来优化有⼤量 watcher 的作⽤域。Vue.js 则根本没有这个问题，因为它使⽤基于依赖追踪的观察系统并且异步列队更新，所有的数据变化都是独⽴地触发，除⾮它们之间有明确的依赖关系。唯⼀需要做的优化是在 v-for 上使⽤ track-by。
React-单向数据流
MVVM流的Angular和Vue，都是通过类似模板的语法，描述界⾯状态与数据的绑定关系，然后通过内部转换，把这个结构建⽴起来，当界⾯发⽣变化的时候，按照配置规则去更新相应的数据，然后，再根据配置好的规则去，从数据更新界⾯状态。
推崇的是函数式编程和单向数据流：给定原始界⾯（或数据），施加⼀个变化，就能推导出另外⼀个状态（界⾯或者数据的更新）。
React和Vue都可以配合Redux来管理状态数据。
⼆、视图渲染
Angular1
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 都有服务端渲染和原⽣渲染的功能。
Vue.js 不使⽤ Virtual DOM ⽽是使⽤真实 DOM 作为模板，数据绑定到真实节点。Vue.js 的应⽤环境必须提供 DOM。Vue.js 有时性能会⽐ React 好**，⽽且⼏乎不⽤⼿⼯优化。
三、性能与优化
性能⽅⾯，这⼏个主流框架都应该可以轻松应付⼤部分常见场景的性能需求，区别在于可优化性和优化对于开发体验的影响。Vue 的话需要加好 track-by 。React 需要 shouldComponentUpdate 或者全⾯ Immutable，Angular 2 需要⼿动指定 change detection strategy。从整体趋势上来说，浏览器和⼿机还会越变越快，框架本⾝的渲染性能在整个前端性能优化体系中，会渐渐淡化，更多的优化点还是在构建⽅式、缓存、图⽚加载、⽹络链路、HTTP/2 等⽅⾯。
四、模块化与组件化
Angular1 -> Angular2
Angular1使⽤依赖注⼊来解决模块之间的依赖问题，模块⼏乎都依赖于注⼊容器以及其他相关功能。不是异步加载的，根据依赖列出第⼀次加载所需的所有依赖。
可以配合类似于Require.js来实现异步加载，懒加载（按需加载）则是借助于 ocLazyLoad ⽅式的解决⽅案，但是理想情况下应该是本地框架会更易懂。
Angular2使⽤ES6的module来定义模块，也考虑了动态加载的需求。
Vue
Vue中指令和组件分得更清晰。指令只封装 DOM 操作，⽽组件代表⼀个⾃给⾃⾜的独⽴单元 —— 有⾃⼰的视图和数据逻辑**。在Angular1 中两者有不少相混的地⽅。
React
⼀个 React 应⽤就是构建在 React 组件之上的。
组件有两个核⼼概念：props,state。
⼀个组件就是通过这两个属性的值在 render ⽅法⾥⾯⽣成这个组件对应的 HTML 结构。
传统的 MVC 是将模板放在其他地⽅，⽐如 script 标签或者模板⽂件，再在 JS 中通过某种⼿段引⽤模板。按这种思路，想想多少次我们⾯对四处分散的模板⽚段不知所措？纠结模板引擎，纠结模板存放位置，纠结如何引⽤模板。
React 认为组件才是王道，⽽组件是和模板紧密关联的，组件模板和组件逻辑分离让问题复杂化了。所以就有了 JSX 这种语法，就是为了把 HTML 模板直接嵌⼊到 JS 代码⾥⾯，这样就做到了模板和组件关联，但是 JS 不⽀持这种包含 HTML 的语法，所以需要通过⼯具将JSX 编译输出成 JS 代码才能使⽤（可以进⾏跨平台开发的依据，通过不同的解释器解释成不同平台上运⾏的代码，由此可以有RN和React开发桌⾯客户端）。
五、语法与代码风格
React,Vue,Angular2都⽀持ES6，Angular2官⽅拥抱了这种 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 是以简单易上⼿为⽬标，但是进阶之后推荐的是使⽤ + vue-loader 的单⽂件组件格式（template,script,style写在⼀个vue⽂件⾥作为⼀个组件）
总结
好了，以上就是这篇⽂章的全部内容了，本⽂的话题实际上很⼤，需要对Angular,React和Vue三门技
术有⾜够深⼊的了解，所以难免有很多总结的不全或者不够深⼊的地⽅，后续我会不断完善和修改。希望本⽂的内容对⼤家的学习或者⼯作能带来⼀定的帮助。
注：个⼈推荐学习顺序Vue.js，React.js，Angular1，Angular2，HyBrid App。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。