前端框架React,Angular和Vue详解

「爱情、让人受尽委屈。」 2022-09-10 03:24 178阅读 0赞

### 前端框架React,Angular和Vue详解 ###

*  1. 三种架构概述
 *  2. Vue概述
 *   *  2.1 Vue简介
     *  2.2 Vue起源
     *  2.3 Vue特点
 *  3. React概述
 *   *  3.1 React简介
     *  3.2 React起源
     *  3.3 React特点
 *  4. Angular概述
 *   *  4.1 Angular简介
     *  4.2 Angular起源
     *  4.3 Angular特点
 *  5. 三种框架对比分析
 *   *  5.1 开源性质
     *  5.2 核心发展
     *  5.3 灵活性
     *  5.4 性能
     *  5.5 对比总结

# 1. 三种架构概述 #

React，Angular，Vue是目前比较主流的三种前端web应用构建工具。  
本篇主要讲三大前端框架简介，后续就可以一起愉快地造轮子了。

# 2. Vue概述 #

## 2.1 Vue简介 ##

Vue：渐进式JavaScript 框架。官网地址：[https://v3.cn.vuejs.org/][https_v3.cn.vuejs.org]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6Z2W6IqC5YWI55Sf_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]

## 2.2 Vue起源 ##

Vue是当今世界上发展最快的JavaScript框架之一。Vue被描述为“用于构建交互式界面的直观，快速且可组合的MVVM。”它于2014年2月首次发布。它是前Google员工Evan You的心血结晶。2016年，Vue第2版发布。它被阿里巴巴，百度，GitLab和其他公司使用。

## 2.3 Vue特点 ##

1.易用  
已经会了 HTML、CSS、JavaScript？即刻阅读指南开始构建应用！

2.灵活  
不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。

3.高效  
20kB min+gzip 运行大小  
超快虚拟 DOM  
最省心的优化

# 3. React概述 #

## 3.1 React简介 ##

React：用于构建用户界面的 JavaScript 库。官网地址：[https://react.docschina.org/][https_react.docschina.org]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6Z2W6IqC5YWI55Sf_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 1]

## 3.2 React起源 ##

React于2013年3月首次发布，被描述为JavaScript库。React由Facebook开发和维护。Facebook在多个页面上使用React用于许多组件，但不用于创建单个页面应用程序。React也被Uber，Netflix，Twitter，Reddit，Udemy，Paypal，Walmart和其他人使用。

## 3.3 React特点 ##

1.声明式  
React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据变动时React 能高效更新并渲染合适的组件。  
以声明式编写 UI，可以让你的代码更加可靠，且方便调试。

2.组件化  
构建管理自身状态的封装组件，然后对其组合以构成复杂的 UI。  
由于组件逻辑使用 JavaScript 编写而非模板，因此你可以轻松地在应用中传递数据，并保持状态与 DOM 分离。

3.一次学习，随处编写  
无论你现在使用什么技术栈，在无需重写现有代码的前提下，通过引入 React 来开发新功能。  
React 还可以使用 Node 进行服务器渲染，或使用 React Native 开发原生移动应用。

# 4. Angular概述 #

## 4.1 Angular简介 ##

Angular：现代 Web 开发平台。官网地址：[https://angular.cn/][https_angular.cn]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6Z2W6IqC5YWI55Sf_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 2]

## 4.2 Angular起源 ##

Angular是一个基于TypeScript的JavaScript框架。它由Google开发和维护。它于2010年10月首次发布，但此后经历了多次更新，目前正在使用Angular 6. Angular被描述为“超级英雄JavaScript MVW框架。”Angular被Google，Wix，weather.com，Forbes和其他人使用。

## 4.3 Angular特点 ##

1.横跨所有平台  
学会用 Angular 构建应用，然后把这些代码和能力复用在多种多种不同平台的应用上 —— Web、移动 Web、移动应用、原生应用和桌面原生应用。

2.速度与性能  
通过 Web Worker 和服务端渲染，达到在如今(以及未来）的 Web 平台上所能达到的最高速度。  
Angular 让你有效掌控可伸缩性。基于 RxJS、Immutable.js 和其它推送模型，能适应海量数据需求。

3.美妙的工具  
使用简单的声明式模板，快速实现各种特性。使用自定义组件和大量现有组件，扩展模板语言。在几乎所有的 IDE 中获得针对 Angular 的即时帮助和反馈。所有这一切，都是为了帮助你编写漂亮的应用，而不是绞尽脑汁的让代码“能用”。

4.百万粉丝热捧  
从原型到全球部署，Angular 都能带给你支撑 Google 大型应用的那些高延展性基础设施与技术。

# 5. 三种框架对比分析 #

## 5.1 开源性质 ##

Angular，React和Vue都在MIT许可下提供。

## 5.2 核心发展 ##

Angular和React受到Facebook，Google，Whatsapp等大公司的支持和使用。目前，Google在他们的许多项目中使用Angular，例如AdWords UI（使用Angular和Dart实现）。而Vue主要用于小型项目的个人。

GitHub统计数据：  
Angular拥有超过25,000颗星和463个贡献者。  
React拥有超过70,000颗星和超过1,000名贡献者。  
Vue拥有近6万颗星，仅有120位贡献者。

## 5.3 灵活性 ##

我们可以通过简单地将JavaScript库添加到源应用程序来开始使用React或Vue进行开发工作。但是对于Angular来说这是不可能的，因为它使用TypeScript。因为在当今的Web开发世界中，我们正在更多地接近微服务和微应用程序，React和Vue通过仅选择那些真正需要的东西来让我们更好地控制应用程序的大小。 Angular最适合作为基于SPA的应用程序的框架。

## 5.4 性能 ##

在库或框架的大小的情况下，Angular相对于其他选项而言相当大。gzip文件大小为143k，而Vue为23k，React为43k。React和Vue都使用Virtual DOM，它可以提高浏览器DOM的性能。在整体分析中，Vue具有出色的性能和三者最深的内存分配。但是所有这三个选项在性能方面都非常接近。

## 5.5 对比总结 ##

Angular：  
想要使用TypeScript  
想要使用OOPS（面向对象编程）  
想要使用基于结果的框架  
想要构建混合应用程序  
拥有大量的开发维护人员  
如果要将html分开用于设计目的。

React：  
想要使用基于JavaScript的方法类库  
想要使用大型生态系统  
想要灵活性  
想要构建本机应用程序  
开发团队包含大量开发人员  
想要为JavaScript代码和html代码保留单个文件。

Vue：  
基于最简单的JavaScript学习曲线  
从事小型项目  
开发团队包含少数的开发人员  
如果要将html分开用于设计目的。

[https_v3.cn.vuejs.org]: https://v3.cn.vuejs.org/
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6Z2W6IqC5YWI55Sf_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]: /images/20220829/4b2001cf8b7e4aff8d35a502da2b6929.png
[https_react.docschina.org]: https://react.docschina.org/
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6Z2W6IqC5YWI55Sf_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 1]: /images/20220829/072f046821614f3cb05e0b03e8cbf3cd.png
[https_angular.cn]: https://angular.cn/
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6Z2W6IqC5YWI55Sf_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 2]: /images/20220829/27073b07dd464711ad5e5cec361a84e4.png