web前端发展历程：angular、react和vue框架简介

快来打我* 2023-02-14 01:40 41阅读 0赞

今天分享的内容是前端3大框架，主要有介绍前端的发展历程，框架出现的原因和介绍angular、react和vue各自的优缺点，让大家能够对这3个框架有一个大致的了解。

**前端技术的发展**  
1994年可以看作是前端历史的一个起点，在这一年的10月13日，网景公司推出了第一版的navigator，这一年tim创建了w3c，他的好基友发布了css，还是这一年，php诞生。  
navigator是一个对象，它包含了有关浏览器的信息，w3c是万维网联盟，是web技术领域最具权威和影响力的国际中立性技术标准机构。到目前为止，w3c发布了超过200项影响深远的web技术标准和实施指南。php是加拿大的Rasmus Lerdorf创建的，他当时是为了支持他的个人网站。php的原意是personal home page，宣传语是超文本处理者。让前端页面可以和后端进行交互，实现了数据库的交互。直到现在php也是一门重要的服务端语言。

这张图片就是最早期的浏览器

![70][]

因为当时的万维网www目的很单一。是欧洲核子研究组织的一帮科学家为了方便看文档、传论文而创造的，这就是为什么Web网页都基于Document。Document就是用标记语言+超链接写成的由文字和图片构成的HTML页面，在当时，这样的功能就已经完全满足了学术交流的需要，所以网页的早期形态和Document一样，完全基于HTML页面，并且所有内容都是静态的。  
然而，随着网页从学术机构走向公众社会，网页承载的功能便超出了学术范围而变得更加丰富，因此早期网页的局限性也逐渐显露出来。

局限性主要有三点  
**第一，所有的网页都基于HTML页面**，因为没有任何手段可以控制局部内容的显示和隐藏，不像现在可以用if或者hide这些属性去完成这个任务，因此任何局部的变化哪怕只多出一个标点符号，都只能重新下载一个新的页面。

**第二，计算任务只能在服务端实现**。由于当时网速的限制，与服务器通信的过程是非常缓慢的，并且此过程是同步阻塞的，于是就会出现这样的一个场景：用户提交一个表单，然后整个页面消失，浏览器呈现白屏，经过漫长的等待，浏览器渲染出一个和之前一模一样的页面，只不过输入框旁边多了一排红色小字：用户名错误。

**第三，所有页面都是静态的**，这意味着一个电商网站有一千种商品，哪怕页面布局一模一样，也必须写一千个单独的页面。  
以上第一条和第三条限制，证明早期网页形态低下的效率是无法仅仅通过提高网速解决的，即使是第二条，在很快的网速的条件下，它会闪屏，也是不行的。

随后：  
**1995年网景推出了JavaScript，实现了客户端的计算任务（如表单验证就是在前端完成**，而不是请求发给后端，在请求页面了），不会再出现那种等了半天只为了返回一行用户名错误的情况。

**1996年微软推出了iframe标签，实现了异步的局部加载**。iframe就相当于页面中的一个页面，只需要刷新这个页面而不用刷新整个页面。

**1999年W3C发布第四代HTML标准，同年微软推出了用于异步数据传输的ActiveX，ajax的前身**，随即各大浏览器厂商模仿实现了XMLHttpRequest。这标识着Ajax的诞生，但是Ajax这个词是在六年之后问世的，特别是在谷歌使用Ajax技术打造了Gmail和谷歌地图之后，Ajax才获得了巨大的关注。Ajax是Web网页迈向Web应用的关键技术，它标识着Web2.0时代的到来。web2.0的核心主旨是以用户为中心。用户不再是单纯的读网站作者输出的内容，同时也在向网站输出内容。  
2006年，XMLHttpRequest被W3C正式纳入标准。  
至此，早期的Document终于进化为了Web page，上述三个局限都得到了妥善的解决。

之后就来到了**jquery的时代**  
早期的网页开发是由后端主导的，前端能做的也就是操作一下DOM。2006年 John Resig发布了jQuery，jQuery主要用于操作DOM，其优雅的语法、符合直觉的事件驱动型的编程思维使其极易上手，因此很快风靡全球，大量基于jQuery的插件构成了一个庞大的生态系统，更加稳固了**jQuery作为JS库一哥的地位**。  
在百度搜索jquery，第一条内容就是它的一个比较庞大的插件库网站。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70][]

再看这个图，老夫写代码就用jquery，

![70 1][]  
这个图不仅是用来搞笑的，他也确实代表着jq在鼎盛时期，在前端人员心里的一个地位。  
其实在web初期，制约Web开发从后到前的因素很简单，就是前端很多事干不了或干不好，当时的浏览器性能弱，标准化程度低。特别是占据大量市场份额的IE，不仅ugly，并且buggy。

于**2008年问世的谷歌V8引擎**改变了这一局面。现代浏览器的崛起终结了微软的垄断时代，**前端的计算能力一下子变得过剩**了。标准组织也非常配合的在2009年发布了第五代JavaScript，前端的装备得到了整体性的提高，前端界就像当年改革开放一样，走进了一个令人目不暇接的新时代。

**2009年AngularJS诞生**，随后被谷歌收购。2010年backbone.js诞生。**2011年React和Ember诞生**。**2014年Vue.js诞生**……前端能做的事越来越多，前后端分离就是大势所趋了。  
这张图片显示的是目前各大浏览器的使用情况，可以看出chrome已经算是一家独大。IE8之所以还有12.03%的使用率，是因为还有一部分人在使用win7系统。

![这里写图片描述][70 2]  
如果继续将时间缩短，可以看出chrome浏览器所占比例在逐步增加。

从前端的发展历程可以看出，**前端开发在产品的整个开发中所占的比重在不断变大**，现代浏览器强大的计算能力让前端开发可以做更多的事情，不单单是实现页面的特效，展示内容等。随着数据量的飙升，前端接触到了越来越多的数据，jQuery专注于DOM的开发模式就显得力不从心了。  
框架应运而生。

## angularjs ##

![20200530154332447.png][]  
框架的始祖，angularjs  
对于实现静态页面的动态话，最初的解决方案是使用js或jq来操作dom，这就导致在一个复杂的页面，开发人员需要进行大量dom操作。而且很多重复的操作，只能通过编写重复的代码或封装函数来解决复用，jq就封装了一些常用的js函数。  
angularjs的出现，简化了开发人员对dom的操作。我们不需要再像之前使用js、jq那样，要高度关注dom结构的操作，而是只需要关注数据模型的变化，框架会帮助我们去改变dom。还有最重要的一点，就是代码的复用问题，不再是简单的复制粘贴，而是可以将一个模块进行封装，然后实现高度复用。这种封装是无法通过封装方法来解决的。  
angularjs是2009年由Misko Hevery等人创建，后被Google收购。现在的angular系列也一直由google的团队进行维护。angularjs在当时可以称作一个完整的解决方案，在构建CRUD应用时，有着很大的便利，CRUD中需要的数据绑定、表单验证、路由、组件重用等都包含在angularjs中。大部分的网页都是crud，除了网页游戏那些。  
AngularJS使用了不同的方法，它尝试去补足HTML本身在构建应用方面的缺陷。AngularJS通过使用我们称为指令(directives)的结构，让浏览器能够识别新的语法。  
例如：  
使用双大括号\{ \{\}\}语法进行数据绑定；  
使用DOM控制结构，来实现迭代或者隐藏DOM片段；  
支持表单和表单的验证；  
能将逻辑代码关联到相关的DOM元素上；  
能将HTML分组成可重用的组件。  
随着前端技术的继续发展，越来越多的框架出现了。  
随后出现的其他框架完成的任务其实与angularjs基本相同，只不过在实现方式和效率等方面有所差别。大浪淘沙，现在还活跃在人们视野中的框架，就是要说的3大框架。  
angularjs是通过directive（指令）去封装组件，react和vue是通过component，就是组件。  
angular、react和vue都是mvvm模式，（model，view，view-model），angular的数据绑定、操作dom就是通过viewmodel完成的。react和vue的view-model的高效率通过框架自身提供的virtual dom（虚拟dom）来实现，它是一个js对象，我们数据的变化会被映射到这个虚拟dom上，然后虚拟dom再去和真实的dom通过各框架自己的算法进行对比，来修改真实dom结构，这就要比angular的viewmodel直接绑定真实dom树的操作要更有效率一些，因为虽然现在的浏览器计算性能大幅度提高，但是频繁对真实dom树的操作依然是一个很大的开销，这要比操作一个js对象，就是virtual dom，的开销大很多。然后这里说的效率不是指人工优化性能提升的那种效率，因为它经过算法的比较再去找树一定会比开发人员针对某一个dom节点的操作效率要低，它完成的是提升了一个整体的水平，因为开发人员无法在一个大项目中对每一个dom元素的操作都去优化。  
简单点说，viewmodel就是帮我们完成了对dom的操作，不需要我们自己去整了。然后angularjs的viewmodel要比react的和vue的落后，效率低。  
既然框架的目的和解决的主要问题是相同的，那么哪一个是更加优秀的方案，就成为了前端人员一直争论的一个话题。  
由于es版本的不断升级，js的不断进步，已经有许多操作不再需要框架去完成，比如一些新关键字、新方法的使用就可以完成angularjs框架内部复杂的过程。再由于数据量的飙升，用户对网页性能的不断看重，等等原因，让angularjs逐渐的被淹没在时代的洪流中。  
随后google也看出了angularjs不再适应时代的发展，开始对其进行跨时代的、破坏性的升级，这就导致angular2之后的版本和angularjs就相当于两个框架了，无论是写法还是实现方式上都有了巨大的差别。  
所以现在所谓的框架之争，其实已经把angularjs即angular1.x排除在外了。指的是angular、react和vue的争斗。

**angular是google升级、维护。  
react由facebook升级、维护。  
vue是由中国人尤雨溪和他的团队负责。**

介绍三者各自的优缺点之前，我们先看一下目前这三个框架在调查中的表现，也算一个可以参考的数据。

![这里写图片描述][70 3]

图中深紫色代表用过还想用，浅紫色代表用过之后不想用，深黄色代表听过想去用。我们基本上可以通过这个图看出，在2017年，被调查的这些人中对于框架的选择。React的深紫色和深黄色占的比重是最多的。对于用过还想用这部分来说，它要比angular2、vue、angularjs加起来还要多。再看浅紫色，用过不想再用的人数，angularjs是最多的。再看深黄色，可以看出vue的比重是最大的，这证明vue给大家的印象还是不错的，也许会在不久的将来逐渐占领市场的部分份额。  
如果单从这张图来看，那么react无疑是框架之争的赢家，再看这张图。

![这里写图片描述][70 4]

angularjs的极速下滑伴随着angular的极速上升，这证明google的angular系列还是有某些特质在吸引着开发者。  
最后再看一组数据。  
从比例来看，react和vue的满意度都超过了90%，angular2基本不变，这个angular指的是angularjs，下降了7%。  
以上的数据毕竟是别人的感受，对于自身而言，在开发过程中是否要使用框架，或又是使用哪种框架还要根据实际情况来决定，下面要说的就是各框架之间的优缺点，之所以没有说对比，是因为这三个框架还没有一个可以说在任何方面都完胜对手，因此更好的办法我认为就是去了解他们的优缺点，再来对比自身项目，看哪个框架更适用。

angular4对于2来说，有了一定的进步，比如也在逐步拆分它的功能，减少体积，增强性能以及router的升级等，在最初，三者之间的性能也会总被拿出来作为某个框架更强的一个论据，最后从各大网站的性能统计上来看，在用户实际使用中，三大框架对于PC端的用户来说是差不多的（虽然性能上的确angular会弱于另外两个，但是毫秒之间的差距，用户是很难体验出来的）。它更多的是在影响开发者，而2和4对于开发者来说是相差不大的，这一点从angular2的代码向4升级时并不难就可以看出来。因此下面会将angular2和4，统称为angular。  
angular是最早出现的框架，第一个优点就是背后靠着google这座大山，有着稳定的维护团队。并且google的Adwords业务（一个按点击量收费的广告业务，据说是google比较赚钱的一个业务）就使用了angular，作为一个赚钱的业务，google也会让它的环境更稳定一些。  
第二个：**angular+typescript，google和微软的双剑合璧**。angular全面支持typescript语法，typescript不仅包含es6中的语法，也包括一些新的语法，最重要的一点是它增加了类型规则，这让代码的可读性和可维护性大大的提高，它也可以让有java或.net背景的开发人员更快的掌握。  
第三个优点：完整。其实相对react和vue来说，angular更可以说是一个框架，而react和vue本身只能算是一个库。angular自带了几乎所有页面应具有的功能，路由、表单、ajax、模版、双向数据绑定等等。它原生的form表单模块非常强大，除了双向绑定的基本功能，还自带验证等，开发人员不需要再去为了这些功能找第三方库，angular一个框架就包含了这些的所有，因此对于选择困难症人群，这是一个优点。  
还有一个优点可以算在这里，每个框架都有自己的cli脚手架，可以快速搭建项目雏形。angular-cli自带国际化。  
第四个优点：它的每一个组件都是一个文件夹，html、js、和css文件是分开的，让代码更加清晰。  
而且它的各类型文件单独存在，在开发中使用任何IDE都可以检查代码。可以使用自带的格式化功能，让开发过程中的代码更整洁。

这些是它的优点，然后是缺点。  
**第一个，最大的缺点，难调试**。angular的代码整洁、规范，很容易维护和审查，但是它的控制台报错信息太差了，大部分情况是无法看出问题到底在哪，这就在开发过程中给调试增加了很大的难度。而react和vue在开发中会更加明确的让开发人员了解到错误出在哪里。

**第二个，它是一个胖子**，它自带了很多模块，这解决了开发人员在选择上耗费的时间，但是这也导致它太重了，压缩后达到了168k，是vue50k的三倍还多，即使在4版本中，拆分了一些功能，但是它依然是个胖子。这些功能无论你用还是不用，它就在那里，占着空间。如果在pc端或许还体现的不是很明显，如果在移动端就会体现出胖的缺点。

**第三个，就是学习成本的问题**，首先ts，它的确对后台的同学们更友好，但是对于一个纯前端人员来说，就是一个另外要学习的知识点。然后是angular它有超多的概念，有一些单单通过文档还很难于理解，还有不友好的api文档。因为它的东西太多，所以api文档内容也很多，增大了阅读难度。这就导致了刚接触angular的人很难上手。也给心理上造成了很大的压力，那文档一看就不想看了，还有api，它是英文的。  
难于调试和更高的学习成本，让许多人望而生畏。

## react ##

![20200530154409554.png][]

我们来看react，react的第一个优点，和angular一样，有一个大厂的团队在维护（万万没想到facebook最近遭遇了天价罚单，这是否会对react的维护造成影响还未可知，所以暂时把这个仍然算作它的一个优点，如果react因此死了，简直就是一个大写的尴尬）。  
react本身不能算作一个框架，因为它本身的功能有限，不过它有一个庞大的生态系统，全世界无数开发人员在为它提供开源包，也许对于开发人员一个很难完成的问题已经有其他人员帮你完成了，只需要引入就好了。  
之前一直在说angular很重。react和vue要比它轻量，体积小本来应该是算在react和vue的优点中，但是在一个大型的项目中，就比如一般的spa，react要用的是**react+redux+react-router或许还要加上发送请求的axios**，如果有一些其他的需求还要再加包，vue也同样，**vue+vuex+vue-router+vue-axios**，这就导致react和vue体积小的优点在逐步减小。所以这一方面我们应该说react和vue的可组装性是强于angular的，更加灵活，想用什么用什么。  
第四点就是react的单项数据流机制，这相对angular的双向数据流来说，因为单向，所以它的各种变化都是可预计的，不像双向数据流，一旦数据流复杂起来，大家都互相触发变化，开发人员根本猜不出你改变一个地方会在另外什么地方跟着变。  
react下载量高居不下的一个重要原因是它的**react-native**，一个优秀的移动端开发框架，使用react特有的jsx语法，可以让开发人员像写pc端页面那样去写移动端，它自动适配了不同的移动端的屏幕分辨率。jsx语法是将html融入到js中。虽然angular的ionic和vue的weex现在也可以进行移动端开发，不过最优秀的，最被大众认可的仍然是react-native。这是github上的下载量，可以看出来下载量远远超过其他两者

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 1][]

最后一点，**react的最大优点就是state，所有的数据都储存在state中**，只可以使用setState方法去改变。开发人员可以把所有的数据都存放在state中，让所有组件都去这里边取数据，当然如果组件过多的话会让顶级组件的state过重，这时可以将公用的放在顶级state中，各自私用的存放在自身的state中。这样在开发和维护的过程中只需要关注各个state就好。

下面来看**react的缺点。  
第一点，react的灵活性就导致了在选择上要耗费成本**，确定使用框架的人要去考量这个项目有哪些功能，要用到哪些包还要去看哪些包的质量要高一些，因为相同的功能也会有很多开源人员贡献包。这些工作耗费的时间成本也是一个项目不得不考虑的问题。这一问题在vue上也同样存在  
**第二点，react的jsx语法，**它学习起来并不是很难，应该是比ts要简单一些。但是它的写法是把html和js结合起来，这就导致在一些IDE上，你没法对它格式化，如果格式化的话，它会将html像js语法那种格式排列。代码的可读性要差一些。而且在js中写html时就要避免两者出现相同的关键字，比如class，在jsx中就要写成className，还要是驼峰式写法  
**第三点，使用redux，redux在处理数据流的时候是使用saga语法**，开发人员要去学习saga的写法，然后saga的异步操作和同步操作是分开在两个函数中写，要在组件本身写一次，数据流到父组件时还要再写一遍，写法上要更复杂，如果想简化它，就要用一个前端应用框架-DVA，就还是通过加东西来增加开发效率。

## vue ##

![20200530154353636.png][]  
最后是vue，vue的一个特点是每一个.vue文件都是一个组件，在这一个vue文件中包括style、scripts、template三个标签来包含css、js和html。它是最后一个出现的框架，所以在它的实现中，它取其他两个框架之长，去其他两个框架之短，借鉴了许多好的设计理念，比如angular的指令、双向绑定，react的component思想。  
相比其他两个框架，vue是国产框架，所以它对国内开发者在学习它时要更友好。它的第一个优点，就是它的学习成本是三个框架中最低的。中文的api文档，我觉得单这一点，就让国内的开发者在学习vue时能够节省超多的精力。  
它的vuex，完成了redux的功能且在写法上更加便捷，不再需要dva这种框架去帮他简便写法。  
vue的体积是三个框架中最小的，加上它的处理机制，在非大型项目的对比中，它的性能是最高的。  
其实无论再说哪些优点，归结起来就是：vue在非大型项目上，有了react和angular的优点，且更简单，更易上手。

**vue的缺点**同样也很明显。  
首先相比其他两个，它是**由个人团队开发和维护**的，虽然个人的团队并不一定没有大厂的团队稳定，但总感觉个人团队对于维护vue这种用户越来越多的框架来说，还是存在着更大的风险。

第二个，由于**vue的实现原理**利用了es5中的一个方法，这就导致了，如果浏览器是不支持es5的，那么它只能放弃vue了。比如ie8

第三点，**vue的响应系统**无法检测属性的添加和删除，以及某些数组的修改，开发人员有时会忽略这一点。

第四点只能说是对比其他两个框架算是缺点，就是它毕竟发展的时间没有它们长，**生态环境要更小**，有时在开发中出现了问题，无法在网络上寻求到有效的帮助。

至此，三个框架的优缺点就基本介绍完了，最后简单总结一下。  
就我个人认为，angular的缺点更明显、它难以调试的缺点更会影响一个项目在开发过程中的进度。vue较小的生态环境和少解决方案也让它在大型项目的开发中败给了react。所以我觉得**react更适用在一个成规模的项目中去使用**。

对于一个前端开发人员来说，框架或者库始终只是一个有助于开发的工具，无论使用哪个，都需要有扎实的js基础，将js掌握牢固是所有前端人员达成的共识，没有哪个框架是脱离它的，我们可以不使用框架，但是不能不用js，只要把它掌握好了，无论哪个框架都能够更加轻松的上手，不仅是使用它们，还包括了解他们的机制。甚至可以自己去封装一个库。  
随着前端技术的不断发展，框架和库也越来越多，对于到底哪个才是最符合项目的，需要经验更加丰富，对框架和项目有更加深入的了解，这样才能够有一个更加可靠的决策。  
————————————————  
   
参考：https://blog.csdn.net/runOnWay/article/details/80103880

[70]: https://img-blog.csdn.net/20180427094853284?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3J1bk9uV2F5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200530154842779.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw,size_16,color_FFFFFF,t_70
[70 1]: https://img-blog.csdn.net/20180427095329779?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3J1bk9uV2F5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 2]: https://img-blog.csdn.net/20180427095413629?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3J1bk9uV2F5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[20200530154332447.png]: https://img-blog.csdnimg.cn/20200530154332447.png
[70 3]: https://img-blog.csdn.net/20180427095617228?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3J1bk9uV2F5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 4]: https://img-blog.csdn.net/20180427095639863?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3J1bk9uV2F5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[20200530154409554.png]: https://img-blog.csdnimg.cn/20200530154409554.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2020053016101033.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw,size_16,color_FFFFFF,t_70
[20200530154353636.png]: https://img-blog.csdnimg.cn/20200530154353636.png