vue、react、angular的优缺点及三者的区别

学习前端三大主流框架，首先要了解MVC、MVP、MVVM三种框架模式

• MVC模式（Model(模型)+View(视图)+controller(控制器)）

View经过Controller来和Model联系，Controller是View和Model的协调者，View和Model不直接联系，基本联系都是单向的。
用户User经过控制器Controller来操做模板Model从而达到视图View的变化

• MVP模式 （是从MVC模式演变而来的，都是经过Controller/Presenter负责逻辑的处理+Model提供数据+View负责显示）

在MVP中，Presenter彻底把View和Model进行了分离，主要的程序逻辑在Presenter里实现。
而且，Presenter和View是没有直接关联的，是经过定义好的接口进行交互，从而使得在变动View的时候能够保持Presenter不变。

• MVVM模式 （Model+View+ViewModel）

MVVM是把MVC里的Controller和MVP里的Presenter改为了ViewModel
View的变化会自动更新到ViewModel,ViewModel的变化也会自动同步到View上显示。
这种自动同步是由于ViewModel中的属性实现了Observer，当属性变动时都能触发对应的操做。

参考：https://www.cnblogs.com/Daisy...

vue框架（MVVM）

优势：

• 轻量级框架，语法简单，学习成本低
• 双向数据绑定
• 组件化开发
• 数据和结构的分离
• 虚拟DOM
• 运行速度快
• 灵活渐进式框架

缺点：

• 不支持IE8
• 生态环境差，不如angular和react
• 不适合偏大型的项目

应用场景：小型应用

参考：https://blog.csdn.net/weixin_...

react框架（MVC）

优势：

• jsx语法建立虚拟DOM，极速的渲染性能
• 组件化开发，组件独立，方便重复使用
• 单向数据流
• 组件生命周期
• 跨浏览器兼容性好

缺点：

• 不适合单独作一个完整的框架

React是目标是UI组件，一般能够和其它框架组合使用，目前并不适合单独作一个完整的框架。React 即便配上 Flux 的组合，也不能称之一个完整的框架，好比你想用Promise化的AJAX？对不起没有，本身找现成的库去。并且第三方组件远远不如Angular多。

应用场景：个性化需求、中型应用

参考：https://www.cnblogs.com/qiqi7...

angular框架

优势：

• 模板功能强大丰富，而且是声明式的，自带了丰富的Angular指令；
• 是一个比较完善的前端框架，包含服务，模板，数据双向绑定，模块化，路由，过滤器，依赖注入等全部功能；
• 自定义指令，自定义指令后能够在项目中屡次使用。
• ng模块化比较大胆的引入了Java的一些东西（依赖注入）
• 双向绑定（脏检查机制）

缺点：

• 验证功能错误信息显示比较薄弱，须要写不少模板标签
• ng提倡在控制器里面不要有操做DOM的代码，对于一些jQuery 插件的使用，若是想不破坏代码的整洁性，须要写一些directive去封装插件
• 从1.0.X升级到1.2.X，貌似有比较大的调整，没有完美兼容低版本，升级以后可能会致使一个兼容性的BUG
• AngularJS 太笨重了，没有让用户选择一个轻量级的版本，固然1.2.X后，Angular也在作一些更改，好比把route，animate等模块独立出去，让用户本身去选择。

应用场景：在大型超大型web应用开发上。

参考：论AngularJS的优缺点

vue与react的区别

相同点：

• react和vue都是用虚拟DOM Virtual DOM
• 中心思想相同：一切都是组件，组件实例之间能够嵌套
• 都有着合理的钩子函数
• 都不内置ajax、route等核心包，以插件的形式加载
• 都有配套的路由和负责处理全局状态管理的库；

不一样点：

• React使用JSX渲染页面，Vue使用简单的模板
• Vue双向数据流，React单向数据流
• Vue.js在模板中提供了指令，过滤器等，能够很是方便，快捷地操做DOM。
• Vue比react运行更快

vue与angular的区别

相同点：

• 都支持指令：内置指令和自定义指令。
• 都支持过滤器：内置过滤器和自定义过滤器。
• 都支持双向数据绑定。
• 都不支持低端浏览器。
• vue和angular绑定均可以用{{}}

不一样点：

• vue至关于angular要变得小巧不少，运行速度比angular快
• vue指令用v-xxx，angular用ng-xxx
• vue中数据放在data对象里面，angular数据绑定在$scope上面
• vue有组件化概念，angular中没有
• AngularJS的学习成本高，好比增长了Dependency Injection特性，而Vue.js自己提供的API都比较简单、直观
• 在性能上，AngularJS依赖对数据作脏检查，因此Watcher越多越慢。 Vue.js使用基于依赖追踪的观察而且使用异步队列更新。全部的数据都是独立触发的

react与angular的区别

相同点：

• 都是单向数据流

不一样点：

• React中没有指令，angular则提供了丰富的指令

参考：[1]: https://www.cnblogs.com/wxtli...
[2]：https://www.jianshu.com/p/ae1...