VueReactAngular的优势劣势区别及适合的项目类型自己的一点点理解

jiezi

5 年前

** 先说说前端框架的模式 **
- 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：MVVM 是把 MVC 里的 Controller 和 MVP 里的 Presenter 改成了 ViewModel。Model+View+ViewModel。View 的变化会自动更新到 ViewModel,ViewModel 的变化也会自动同步到 View 上显示。这种自动同步是因为 ViewModel 中的属性实现了 Observer，当属性变更时都能触发对应的操作。** 原文链接 https://www.csdn.net/gather_25/OtTacgysNDA5LWJsb2cO0O0O.html**

优势

vue
1. 采用 MVVM 框架模式
2. 轻量级的框架，学习成本低
3. 现在比较普及的 vue cli（2.0/3.0）双向数据绑定 (object.defineProperty)
4. 有自己的指令 (v-model), 还可以自定义指令 (v-xxx)
5. 组件化开发
6. 双向数据流
7. 数据集中管理 (vueX)
8. 生命周期、路由、路由的生命周期
react
1. 采用 MVC 框架
2. 操作的是虚拟 dom(jsx 语法)，极速的渲染性能
3. 项目结构清晰
4. 组件化开发
5. 生命周期、路由
6. 组件化开发组件特性 (props/state/setState())
7. 数据集中管理器 redux、react-redux 等
8. 单向数据流

angular
1. 采用 MVC 框架
2. 良好的结构程序
3. 双向数据绑定 (脏检查机制)
4. 指令
5. 适合开发大型项目
6. 依赖注入通过依赖注入 $scope 可以对控制器等注入一些服务。
```
   如 `function HelloController($scope, $log) {$scope.greeting = { text: 'Hello'};  
   }  `
```

劣势

vue
1. 不支持低版本浏览器（IE8 及以下，双向数据绑定会失灵）
2. 首次加载页面耗时较长
3. 不适合大型项目开发
react
1. 目标是 UI 组件
2. 不适合采用 react 框架独立开发一整套项目
3. 第三方的依赖库少，不适合做大型项目
angular
1. 验证信息等类似功能薄弱，需要写很多的模板，不能嵌套多个视图，就算采用 angular-ui/ui-router 解决这个问题，但是这样做对 URL 控制性差，并且必须得是嵌套式，
2. 学习成本高
3. 不适合做中小型项目

三者的区别
vue : 双向数据流，vuex 集中管理数据，有指令且能自定义指令，双向数据绑定
react : 单项数据流，操作虚拟 dom，redux 集中管理数据，无指令
angular : 单项数据流，性能稍差于另外两个框架，学习成本高，双向数据绑定原理不同于 vue

三者适合的项目类型
vue : 适合中小型项目
react : 适合中小型项目
angular : 适合大型项目

三者各自的优势