JS三大框架的区别

JS三大框架的区别

目前，Angular、Vue、React 是常用的三大框架，但日常常用vue，对angular和react不怎么熟悉。

Vue与AngularJS的区别

• Angular采用TypeScript开发, 而Vue可以使用javascript也可以使用TypeScript
• AngularJS依赖对数据做脏检查，所以Watcher越多越慢；Vue.js使用基于依赖追踪的观察并且使用异步队列更新，所有的数据都是独立触发的。
• AngularJS社区完善, Vue的学习成本较小

Vue与ReactJS的区别

• vue组件分为全局注册和局部注册，在react中都是通过import相应组件，然后模版中引用；
• props是可以动态变化的，子组件也实时更新，在react中官方建议props要像纯函数那样，输入输出一致对应，而且不太建议通过props来更改视图；
• 子组件一般要显示地调用props选项来声明它期待获得的数据。而在react中不必需，另两者都有props校验机制；
• 每个Vue实例都实现了事件接口，方便父子组件通信，小型项目中不需要引入状态管理机制，而react必需自己实现；
• 使用插槽分发内容，使得可以混合父组件的内容与子组件自己的模板；
• 多了指令系统，让模版可以实现更丰富的功能，而React只能使用JSX语法；
• Vue增加的语法糖computed和watch，而在React中需要自己写一套逻辑来实现；
• react的思路是all in js，通过js来生成html，所以设计了jsx，还有通过js来操作css，社区的styled-component、jss等；而 vue是把html，css，js组合到一起，用各自的处理方式，vue有单文件组件，可以把html、css、js写到一个文件中，html提供了模板引擎来处理。
• react做的事情很少，很多都交给社区去做，vue很多东西都是内置的，写起来确实方便一些， 比如 redux的combineReducer就对应vuex的modules， 比如reselect就对应vuex的getter和vue组件的computed， vuex的mutation是直接改变的原始数据，而redux的reducer是返回一个全新的state，所以redux结合immutable来优化性能，vue不需要。
• react是整体的思路的就是函数式，所以推崇纯组件，数据不可变，单向数据流，当然需要双向的地方也可以做到，比如结合redux-form，组件的横向拆分一般是通过高阶组件。而vue是数据可变的，双向绑定，声明式的写法，vue组件的横向拆分很多情况下用mixin。

	优点	缺点	模式
Angular	模块化功能强大、自定义directive非常灵活、双向数据绑定，依赖注入	比较笨重，学习成本高，不兼容IE6/7	MVC
vue	更轻量，单页面，简单易学	不支持IE8	MVVM
react	速度快、跨浏览器兼容、单向数据流、兼容性好	并不是一个完整的框架，需要加上ReactRouter和Flux才能完成	MVVM