Skip to content

Latest commit

 

History

History
149 lines (88 loc) · 7.15 KB

前端框架之间的区别.md

File metadata and controls

149 lines (88 loc) · 7.15 KB

前端框架之间的区别

提示：可能某些说法不准确，仅供参考。

React、Angular、Vue.js的比较速览

名称 Angular React Vue.js
类型 单一框架 要构建UI库 单一库
选择理由 如果要使用TypeScript 如果您采用“一切皆是JavaScript”的方法 简单的JavaScript和HTML
创始者 Google 由Facebook维护 由Google前员工创建
应用程序类型 如果您想开发原生应用程序、混合应用程序和Web应用程序 如果您想开发单面Web应用和移动应用 高级单面Web应用和支持原生应用程序
理想场景 如果要关注大型的、功能丰富的应用程序 适合现代Web开发和原生渲染的IOS和Android应用程序 是Web开发和单面应用程序的理想选择
学习曲线 崎岖的学习曲线 比Angular容易一点 平缓的学习曲线
开发者友好程度 如果要使用基于结构的框架 如果您希望在开发环境中且有灵活性 如果您关注点分离
模型 基于MVVM(模型-视图-控制器)体系结构 基于虚拟文档对象模型(Document Object Model) 基于虚拟文档对象模型(Document Object Model)
编写方式 TypeScript JaveScript JaveScript
社区支持 有庞大的开发者和支持者社区 Facebook开发者社区 通过众包来赞助开源项目
语言首选项 建议使用TypeScript 建议使用JSX-javaScript XML HTML模板和JavaScript
普及程度 广受开发者欢迎 一般 一般
使用的公司 Google、Forbes、Wix和Weather.com Facebook、Uber、Netflix、Twitter、Readdit、Paypal、Walmart 阿里巴巴、百度、GitLab和其他

Vue.js

其实Vue.js不是一个框架，因为它只聚焦视图层，是一个构建数据驱动的Web界面的库。

Vue.js通过简单的API（应用程序编程接口）提供高效的数据绑定和灵活的组件系统。

应用场景：小型应用

特性

  • 轻量级的框架

  • 双向数据绑定

  • 指令

  • 插件化

优点

  • 简单：官方文档很清晰，语法简单，学习成本低，比 Angular 简单易学。

  • 快速：异步批处理方式更新 DOM。

  • 组合：用解耦的、可复用的组件组合你的应用程序。

  • 紧凑：~18kb min+gzip，且无依赖。

  • 强大：表达式 & 无需声明依赖的可推导属性 (computed properties)。

  • 体积小：Vue.js只有20KB左右的大小，使得其速度和灵活性相对于其它框架都好不少。

  • 对模块友好：可以通过 NPM、Bower 或 Duo 安装，不强迫你所有的代码都遵循 Angular 的各种规定，使用场景更加灵活。

缺点

  • 影响度不是很大：google了一下，有关于Vue.js多样性或者说丰富性少于其他一些有名的库。
  • 不支持IE8：2. 新生儿：Vue.js是一个新的项目，没有angular那么成熟。

AngularJS

angularJS是一款优秀的前端JS框架，已经被用于Google的多款产品当中。

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

特性

  • 良好的应用程序结构

  • 双向数据绑定

  • 指令

  • HTML模板

  • 可嵌入、注入和测试

优点

  • 是一个比较完善的前端MVVM框架，包含服务，模板，数据双向绑定，模块化，路由，过滤器，依赖注入等所有功能；

  • ng模块化比较大胆的引入了Java的一些东西（依赖注入），能够很容易的写出可复用的代码，对于敏捷开发的团队来说非常有帮助。

  • 模板功能强大丰富，自带了极其丰富的angular指令。

  • 自定义指令，自定义指令后可以在项目中多次使用。

  • 数据双向绑定，可以减少出错的风险；

  • MVVM(Model-View-ViewModel)使得开发者可以针对同一个App模块同时开发；

  • Google维护：AngularJS有Google来维护，无疑有了一个强大的后台，对于推广和维护明显比Vue.js和avalon有优势，社区也非常活泼，能够很好促进它的发展。，这也意味着他有一个坚实的基础和社区支持。

缺点

  • 与生俱来的复杂的语法；好在Angular 5使用TypeScript 2.4，已经简单多了；

  • 迁移问题：从低版本升级到新版本的时候，不兼容导致迁移成本高。

  • 文档例子非常少, 官方的文档基本只写了api, 一个例子都没有, 很多时候具体怎么用都是google来的, 或直接问misko,angular的作者.

  • angular 入门很容易 但深入后概念很多, 学习中较难理解

  • DI 依赖注入 如果代码压缩需要显示声明.

  • 对IE6/7 兼容不算特别好, 就是可以用jQuery自己手写代码解决一些.

  • 指令的应用的最佳实践教程少, angular其实很灵活, 如果不看一些作者的使用原则,很容易写出 四不像的代码, 例如js中还是像jQuery的思想有很多dom操作

React

React主要用于构建UI。你可以在React里传递多种类型的参数，如声明代码，帮助你渲染出UI、也可以是静态的HTML DOM元素、也可以传递动态变量、甚至是可交互的应用组件。

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

特性

  • React采用声明范式，可以轻松描述应用。

  • 高效：React通过对DOM的模拟，最大限度地减少与DOM的交互。

  • 灵活：React可以与已知的库或框架很好地配合。

优点

  • 易于学习：由于语法十分简洁，和Angular相比，React要容易得多。工程师只需要重温一下HTML的基本知识就足够。根本不需要像Angular一样，还要深度学习TypeScript。

  • 速度快：在UI渲染过程中，React通过在虚拟DOM中的微操作来实现对实际DOM的局部更新。

  • 跨浏览器兼容：虚拟DOM帮助我们解决了跨浏览器问题，它为我们提供了标准化的API，甚至在IE8中都是没问题的。

  • 模块化：为你程序编写独立的模块化UI组件，这样当某个或某些组件出现问题是，可以方便地进行隔离。

  • 单向数据流：Flux是一个用于在JavaScript应用中创建单向数据层的架构，它随着React视图库的开发而被Facebook概念化。

  • 同构、纯粹的javascript：因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行，预渲染你的应用有助于搜索引擎优化。

  • 兼容性好：比如使用RequireJS来加载和打包，而Browserify和Webpack适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。

  • 结合ES6/7，React可以很容易写出各种酷炫代码；

缺点

  • 缺乏官方文档：ReactJS的快速开发使得文档的缺乏，众多开发者的维护也使其缺乏一个系统化的思路；

  • React因为太灵活增加了决策成本而不好使； 需要很长的时间去掌握，因为ReactJS需要你对如何将UI和MVC框架整合有一个足够深度的理解。

  • React本身只是一个V而已，并不是一个完整的框架，所以如果是大型项目想要一套完整的框架的话，基本都需要加上ReactRouter和Flux才能写大型应用。

总结

  • 对于一个真正的工程师，选用什么框架并没有多大的区别，因为你只需要花时间去学习和熟悉它们。每一个框架都有各自的优点和缺点，所以主要是看自己的应用场景下哪个框架最适合。