一。三大框架简介
1.React
(1)起源
React起源于Facebook的内部项目,是facebook搞出来的一个轻量级的组件库,用于解决前端视图层的一些问题,也就是MVC中的V层的问题,它内部的Instagram网站就是用React搭建的,于2013年5月开源。React拥有较高的性能,代码逻辑非常简单,越来越多的人已经开始关注和使用它。
(2)React解决了什么问题呢?
解决了三个问题:1.组件复用问题;2.性能问题;3.兼容性问题。
(3)React的工作原理?
React 会创建一个虚拟DOM(Virtual DOM)。当一个组件中的状态发生改变时,React首先会通过“diff”算法来标记虚拟DOM中的改变;第二步是调和,会用diff的结果来更新DOM。
(4)React的特性?
1.声明式设计:React采用声明范式,可以轻松描述应用。
2.高效:React通过对DOM的模拟,最大限度地减少与DOM的交互。
3.灵活:React可以与已知的库或框架很好的配合。
(5)React的优缺点?
优点:
1.速度快:在UI渲染过程中,React通过在虚拟DOM中的微操作来实现对实际DOM的局部更新;
2.跨浏览器兼容:虚拟DOM帮助我们解决了跨浏览器问题,它为我们提供了标准化的API,甚至在IE8中都是没问题的;
3.模拟化:为你程序编写独立的模块化UI组件,这样当某个或某些组件出现问题时,可以方便地进行隔离;
4.单向数据流:Flux 是一个用于在JavaScript 应用中创建单向数据层的架构,它跟随着React视图层的开发而被facebook 概念化;
5.同构、纯粹的JavaScript:因为搜索引擎的爬虫程序依赖的是服务器端相应而不是JavaScript 的执行,预渲染你的应用有助于搜索引擎优化;
6.兼容性好:比如使用requireJS来加载和打包,而Browserify 和webpack 适用于构建大型应用。它们使得那些艰难的任务不再让人畏而生畏。
缺点:
React本身只是一个V而已,并不是一个完整的框架,所以如果是大型项目如果想要一套完整的框架的话,基本上都需要加上 ReactRouter 和Flux 才能写成大型应用。
2.Vue
Vue 是尤雨溪写的一个构建数据驱动的 web 界面的库,准确来说不是一个框架,它聚焦在V层。
(2.1) Vue的特性
1.轻量级的框架;
2.双向数据绑定;
3.指令;
4. 插件化;
(2.2) Vue的优缺点
优点:
1.简单:官方文档很清晰,中文,比angular简单易学;
2.快速:异步批处理方式更新DOM;
3.组合:用解耦的、可复用的组件组合你的应用程序;
4.紧凑:~18kb min + gzip,且无依赖;
5.强大:表达式 无需声明依赖的可推导属性;
6.对模块友好:可以通过NPM、Bower或Duo安装,不强迫你所有的代码都遵循Angular的各种规定,使用场景更加灵活;
缺点:
1.新生儿:Vue.js是一个新的项目,没有angular那么成熟;
2.影响度不算很大:google了一下,有关于Vue.js多样性或者说丰富性少于其他一些有名的库;
3.不支持IE8
3.Angular
Angular 是一款优秀的前端JS框架,已经被用于Google 的多款产品中。
(3.1)Angular 的特性
1.良好的应用程序结构;
2.双向数据绑定;
3.指令;
4.HTML 模板;
5.可嵌入、注入和测试。
(3.2)Angular 的优缺点?
优点:
1.模板功能丰富强大,自带了及其丰富的 angular 指令;
2.是一个比较完善的前端框架,包含服务,模板,数据双向绑定,模块化,路由、过滤器。依赖注入等所有功能;
3.自定义指令,自定义指令后可在项目中多次使用;
4.ng 模块比较大胆的引入了 java 的一些东西(依赖注入),能够很容易的写出可复用的代码,对于敏捷开发的团队来说都是非常有帮助的;
5.angularjs 是互联网巨人谷歌开发,这也意味着它有一个坚实的基础和社区支持;
缺点:
1.angular 入门很容易,但深入后概念很多,学习中较难理解;
2.文档例子非常少,官方的文档基本只写了api,一个例子都没有,很多时间具体怎么用都是google 来的,或者之间问misko,angular作者;
3.对IE6/7 兼容不算特别好,就是可以用jQuery 自己手写代码解决一些;
4.指令的应用的最佳实践教程少,angular 其实很灵活,如果不看一些作者的使用原则,很容易写出一些不三不四的代码,例如js中还是像 jQuery 的思想有很多dom操作;
5.DI 依赖注入,如果代码压缩需要显示声明。
二。三大框架对比
对比点 | Vue | React | Angular |
开发团队 | 尤雨溪 | ||
数据流 | 双向 | 单向 | 双向 |
使用场景 | 中小型项目 | 中小型项目 | 大型 |
渲染性能优先级 | 0 | 1 | 2 |
上手优先级 | 0 | 1 | 2 |
APP方案 | Wexx | RN(React Native) | lonic |