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

至此，早期的Document终于进化为了Web page，上述三个局限都得到了妥善的解决。

之后就来到了jquery的时代

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

在百度搜索jquery，第一条内容就是它的一个比较庞大的插件库网站。

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

这个图不仅是用来搞笑的，他也确实代表着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系统。

如果继续将时间缩短，可以看出chrome浏览器所占比例在逐步增加。

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

框架应运而生。

angularjs

框架的始祖，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是由中国人尤雨溪和他的团队负责。

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

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

如果单从这张图来看，那么react无疑是框架之争的赢家，再看这张图。

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

我们来看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上的下载量，可以看出来下载量远远超过其他两者

最后一点，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

最后是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，只要把它掌握好了，无论哪个框架都能够更加轻松的上手，不仅是使用它们，还包括了解他们的机制。甚至可以自己去封装一个库。

随着前端技术的不断发展，框架和库也越来越多，对于到底哪个才是最符合项目的，需要经验更加丰富，对框架和项目有更加深入的了解，这样才能够有一个更加可靠的决策。

————————————————

参考：