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