TypechoJoeTheme

快把钟哥带走

zyz

网站页面
标签搜索
Vue

Vue、React、Angular框架对比

zyz
2021-04-06
/
0 评论
/
522 阅读
/
正在检测是否收录...
04/06

一、框架模式了解

1.MVC

Model: 模型(数据层)
View: 视图(数据展示)
Controller: 控制器(业务逻辑)

主要是基于分层的目的,让彼此的职责分开。

2.MVP

Model: 模型(数据层)
View: 视图(数据展示)
Presenter: 控制器(业务逻辑)

从MVC模式演变而来。

3.MVVM

Model: 模型(数据层)
View: 视图(数据展示)
ViewModel: 控制器(业务逻辑和数据的开发

二、MVVM好处

1.低耦合

View可以独立于Model变化和修改,一个ViewModel可以绑定到不同的View上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变。

2.可复用

可以把一些视图的逻辑放在ViewModel里面,让很多View重用这段视图逻辑。

3.独立开发

开发人员可以专注与业务逻辑和数据的开发(ViewModel)。设计人员可以专注于界面(View)的设计。

三、文件大小

1.Vue是属于轻量级的,打包之后,只有20KB+。
2.Angular,打包之后,就有60KB+。
3.React,打包之后,就有40KB+。

四、学习曲线

在接触新的框架时,都需要学习,这就会涉及到学习成本,学习曲线的问题。
1.Angular比较陡峭

- 概念非常多
- 版本升级,语法不兼容问题

备注: Java工程师开发的,开发思想更多偏向于后台技术。不管怎么样angular都是属于先驱者,也正因为angular后续才会出现例如Vue、React这样的框架。

2.React较为陡峭

- JSX的语法
- react全家桶、react-router

备注: 使用React之前,必须先学习JSX语法,后续还需要配合上全家桶等。

3.Vue最简单

HTML + CSS + JavaScript马上上手。

备注: 不管这三个框架中的哪个想要用好都是需要花时间的,并不是说Vue上手简单,项目中就能用的很好,这用法非常灵活。

五、Vue特性以及优缺点

1.特性

- 轻量级框架
- 双向数据绑定
- 指令
- 插件化

2.优点

- 简单: 官方文档清晰,简单易学
- 快速: 异步批处理方式更新DOM
- 组合: 用解耦的、可复用组件组合应用程序
- 强大: 表达式、无需声明依赖的可推倒属性
- 模块友好: 可通过NPM、Bower、Duo安装,无需强迫所有代码遵循Angular各种规定,使用场景更灵活

3.缺点

- 新生项目(其实经过那么几年发展,已经不算是新生项目了)
- 不支持IE8

六、Angular特性以及优缺点

1.特性

- 良好的应用程序结构
- 双向数据绑定
- 指令
- HTML模板
- 可嵌入、注入和测试

2.优点

- 模板功能强大丰富,自带及其丰富的angular指令
- 完善前端框架: 服务、模板、数据双向绑定、模块化、路由、过滤器、依赖注入等所有功能
- 自定义指定,可在项目中多次使用
- ng模块化比较大胆引入了Java的一些东西(依赖注入),提高代码的复用性,对敏捷开发团队非常有帮助
- 互联网巨人谷歌开发,有坚实的基础和社区支持

3.缺点

- 深入概念多,学习中难以理解
- 文档较少,文档只有API,缺少例子
- 对IE6/7兼容性不是特别好,可用jQuery手写代码解决一些
- 指令应用的最佳实践教程少,angular其实是很灵活的,假如不了解作者使用原则,容易写出四不像代码
- 依赖注入,如果需要代码压缩需要显示声明

六、React特性以及优缺点

1.特性

- 声明式设计: React采用声明范式,可轻松描述应用
- 高效: React通过对DOM的模拟,最大限度地减少DOM的交互
- 灵活: React可以与已知的库或框架很好的配合

2.优点

- 速度快: 在UI渲染过程中,React通过模拟DOM中的微操作实现对实际DOM的局部属性
- 跨浏览器兼容: 虚拟DOM帮助解决跨浏览器兼容问题,提供了标准化API,甚至IE8都没问题
- 模块化: 为应用程序编写独立的模块化UI组件,可方便进行隔离
- 单向数据流: Flux是用于在javascript应用中创建单向数据层的架构,随着React视图库的开发被Facebook概念化
- 纯粹的javascript: 搜索引擎爬虫程序依赖的是服务端响应,而不是javascript执行,预渲染应用有帮于搜索引擎优化
- 兼容性好: 使用RequireJS来加载和打包,而webpack适合于构建大型应用,它使得艰难任务不在让人望而却生畏

3.缺点

React本身只是一个V而已,并不是完整框架。要应用到大型项目需要加上ReactRouter和Flux
赞(0)
评论 (0)