[toc] ## Angular React 和 Vue的比较 ### 1）数据流 **数据绑定** - Angular 使用双向绑定即：界面的操作能实时反映到数据，数据的变更能实时展现到界面。 - Vue 也支持双向绑定，**默认为单向绑定**，数据从父组件单向传给子组件。在大型应用中使用单向绑定让数据流易于理解。 Angular和Vue.js比较： - Vue.js 有更好的性能，并且非常非常容易优化，因为它不使用脏检查。Angular，当 watcher 越来越多时会变得越来越慢，因为作用域内的每一次变化，所有 watcher 都要重新计算。 - Vue.js 使用基于依赖追踪的观察系统并且异步列队更新，所有的数据变化都是独立地触发，除非它们之间有明确的依赖关系。唯一需要做的优化是在 v-for 上使用 track-by。 **React-单向数据流** - React推崇的是函数式编程和单向数据流：给定原始界面（或数据），施加一个变化，就能推导出另外一个状态（界面或者数据的更新）。 - React和Vue都可以配合Redux来管理状态数据。 ### 2）模块化与组件化 **Vue** Vue中指令和组件分得更清晰。指令只封装 DOM 操作，而组件代表一个自给自足的独立单元 —— 有自己的视图和数据逻辑**。在 Angular1 中两者有不少相混的地方。 **React** 一个 React 应用就是构建在 React 组件之上的。 组件有两个核心概念：props,state。 一个组件就是通过这两个属性的值在 render 方法里面生成这个组件对应的 HTML 结构。 React 认为组件才是王道，而组件是和模板紧密关联的，组件模板和组件逻辑分离让问题复杂化了。所以就有了 JSX 这种语法，就是为了把 HTML 模板直接嵌入到 JS 代码里面，这样就做到了模板和组件关联，但是 JS 不支持这种包含 HTML 的语法，所以需要通过工具将 JSX 编译输出成 JS 代码才能使用 ### 3）语法与代码风格 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文件里作为一个组件） ****** **参考文章** - [被误解的 MVC 和被神化的 MVVM](http://blog.devtang.com/2015/11/02/mvc-and-mvvm/) - [gulp和webpack究竟有什么区别？](https://segmentfault.com/q/1010000008058766/a-1020000008058892) - [gulp与webpack的区别](http://www.cnblogs.com/lovesong/p/6413546.html) - [前端学习总结（二十三）——前端框架天下三分：Angular React 和 Vue的比较](http://blog.csdn.net/haoshidai/article/details/52346865)