一文了解前端三大框架Angular+Vue+React

Angular

1、简介

AngularJS诞生于2009年，由Misko Hevery等人创建，是一款构建用户界面的前端框架，后为Google所收购。AngularJS是一个应用设计框架与开发平台，用于创建高效、复杂、精致的单页面应用，通过新的属性和表达式扩展了 HTML，实现一套框架，多种平台，移动端和桌面端。AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等。Angular是AngularJS的重写，Angular2以后官方命名为Angular，2.0以前版本称为AngualrJS。AngularJS是用JavaScript编写，而Angular采用TypeScript语言编写，是ECMAScript 6的超集。

2、产生背景

为了克服HTML在构建应用上的不足而设计的。通过以下技术来解决静态网页技术在构建动态应用上的不足：

• 类库：类库是一些函数的集合，它能帮助开发者写WEB应用。起主导作用的是开发者的代码，由开发者来决定何时使用类库。类库有：jQuery等。
• 框架：框架是一种特殊的、已经实现了的WEB应用，只需要对它填充具体的业务逻辑。这里框架是起主导作用的，由它来根据具体的应用逻辑来调用开发者的代码。框架有：knockout、sproutcore等。

AngularJS使用了不同的方法，它尝试去补足HTML本身在构建应用方面的缺陷。AngularJS通过使用我们称为指令(directives)的结构，让浏览器能够识别新的语法。例如：

• 使用双大括号{{}}语法进行数据绑定
• 使用DOM控制结构来实现迭代或者隐藏DOM片段
• 支持表单和表单的验证
• 能将逻辑代码关联到相关的DOM元素上
• 能将HTML分组成可重用的组件

3、优势

• Angular框架支持各种平台而且功能强大，提供了各种工具和可维护的方式来构建项目的模式。正确使用它时就不会遇到难以修改及测试的代码结构
• Angular是使用TypeScript构建的，而TypeScript又依赖于JS ES6，所以不需要学习全新的语言，但仍然可以获得静态类型，接口，类，命名空间，装饰器等功能。
• Angular中的组件是分离的，可以轻而易举的替换各种组件。使用Angular，不会紧密地耦合演示文稿和应用程序的逻辑，会使标记更清晰，更简单。
• Angular的目的在于进行全面测试，它支持使用Jasmine和Protractor等工具进行单元测试和端到端测试。
• Angular同适用移动和pc端，它是一个适用于多个平台的框架。而且在此框架中可以找到许多有用的第三方工具。

Vue

1、简介

Vue是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用，采用自底向上增量开发的设计。Vue的核心库只关注视图层，易于上手，便于与第三方库或既有项目整合。当与现代化的工具链以及各种支持类库结合使用时，Vue能够为复杂的单页应用（SPA）提供驱动。Vue有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。Vue.js不是一个全能框架，它只聚焦于视图层。

2、语言特点

• 易用：在有HTML，CSS，JavaScript的基础上，快速上手。Vue.js的API是参考AngularJS、KnockoutJS、Ractive.js、Rivets.js。Vue.js的API中包含了许多Vue.js的独特功能。
• 灵活：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。
• 性能：20kbmin+gzip运行大小、超快虚拟DOM、最省心的优化。

React

1、简介

React是用于构建用户界面的JavaScript库，起源于Facebook的内部项目，该公司对市场上所有JavaScript MVC框架都不满意，决定自行开发一套，用于架设Instagram的网站。由于React的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单，从最早的UI引擎变成了一整套前后端通吃的Web App解决方案。衍生的React Native项目，目标更是宏伟，希望用写Web App的方式去写Native App。如果能够实现，整个互联网行业都会被颠覆，因为同一组人只需要写一次UI，就能同时运行在服务器、浏览器和手机。
React主要用于构建UI。可以在React里传递多种类型的参数，如声明代码，帮助你渲染出UI、可以是静态的HTML DOM元素、可以传递动态变量、甚至是可交互的应用组件。

2、框架特点

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