至此，初期的Document总算进化为了Webpage，上述三个局限都得到了妥善的解决。

以后就来到了jquery的时代

初期的网页开发是由前端主导的，后端能做的也就是操作一下DOM。2006年JohnResig发布了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年由MiskoHevery等人创建，后被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的高效率通过框架自身提供的virtualdom（虚拟dom）来实现，它是一个js对象，我们数据的变化会被映射到这个虚拟dom上，之后虚拟dom再去和真实的dom通过各框架自己的算法进行对比，来更改真实dom结构，这就要比angular的viewmodel直接绑定真实dom树的操作要更有效率一些，由于尽管如今的浏览器估算性能大幅度提升，并且频繁对真实dom树的操作仍然是一个很大的开支，这要比操作一个js对象，就是virtualdom，的开支大好多。之后这儿说的效率不是指人工优化性能提高的那个效率，由于它经过算法的比较再去找树一定会比开发人员针对某一个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，是vue5050k的三倍还多，虽然在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，只要把它把握好了，无论那个框架都还能愈发轻松的上手，不仅是使用它们，还包括了解她们的机制。甚至可以自己去封装一个库。

随着后端技术的不断发展，框架和库也越来越多，对于究竟那个才是最符合项目的，须要经验愈发丰富，对框架和项目有愈发深入的了解，这样才才能有一个愈发可靠的决策。

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

参考：