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

29次阅读

共计 1491 个字符,预计需要花费 4 分钟才能阅读完成。

三者各自的优势

** 先说说前端框架的模式 **
- 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 : 适合大型项目

    正文完
     0