摘要：好好打基础，然后多尝试不同风格的框架，因为只有尝试过后才能理解比如徐飞提到的各种权衡，也只有尝试过后才能知道哪个能真正提升自己的开发效率。
今天看了几篇关于这三个主流框架的PK，如标题：react.js,angular.js,vue.js学习哪个好？相信每个人都有这种问题。
现在的前端框架层出不穷，作为前端开发者何去何从？fackbook的react.js盛世火热，react native打开了JS占领android和ios领地，让JS变的无所不能。angular.js背后有谷歌，个人感觉太重了，相对而言更喜欢vue,但是实际选择哪个更好呢？总不能一下都学了也没这个精力啊那么当你读完这篇文章或许你就有答案了！
对于初学React者。一定认为这玩意真难学，还不好写，还不如原生JS写的6呢。没错起码我现在是这么觉得的，没准以后会发现它的好呢也说不定。先来说说都有的感想：
认为ReactJS在真正开发大型复杂系统的时候并不好，首先一点就是，一个完整页面的HTML模板被完全碎片化了，被分散到一个个的Component里，这样的话，UI Designer和Dev根本没有一个统一的视图去协作。
那么，徐飞给你回答了这个问题，往下看：
我们学一个东西，通常两个目的：
1.为了解决现有的问题
2.为了解决将来可能会有的问题
所以，在学这些东西之前，先必须了解，它们是用来解决什么问题的。
Angular，React，Vue，这三者其实面对的是同一个领域，那就是Web应用，什么是Web应（前端做的都是web应用包括移动端）
这三者中，Angular的适用领域相对窄一些，React可以拓展到服务端，移动端Native部分，而Vue因为比较轻量，还能用于业务场景非常轻的页面中。
在Web应用中，我们需要解决的问题可以归纳为三类：
状态
组织
效率
1. 状态
在一个业务界面中，我们可能会根据某些数据去生成一块界面，然后通过界面上的某些操作，改变一些数据，从而影响界面的另外一些部分。
这里面就存在两种关系，一种是从数据到界面，一种是从界面到数据。能够描述界面当前状况的数据，就可以被称为状态。
如果不对状态作抽象，很可能会导致逻辑的混乱，比如说，一个地方点了，要改多个地方，这种代码直接写，很容易写乱的，所以，不同的框架采用不同的方式进行了处理。
比如说MVVM流的Angular和Vue，还有Avalon，Regular，Knockout，都是走的这一流派，通过类似模板的语法，描述界面状态与数据的绑定关系，然后通过内部转换，把这个结构建立起来，当界面发生变化的时候，按照配置规则去更新相应的数据，然后，再根据配置好的规则去，从数据更新界面状态。
React走的是另外一个流派，就是所谓的函数式，在这个里面，推崇的是单向数据流：给定原始界面（或数据），施加一个变化，就能推导出另外一个状态（界面或者数据的更新）。
在这里需要额外提一下ReactiveJS，它的理念又有所不同，是基于Reactive的。
2. 组织
刚才这些，都可以看作是满足最基本的需求，那就是业务的正确性。在这之后，就有另外的诉求了，首当其冲的就是整个业务代码的组织。
所谓组织，指的是两个方面，一方面是模块关系，另一方面是业务模型。
我们刚才提到组件化，整个应用形成了一个组件树，组件之间可能会需要通讯，它们通讯的内容可能是简单的界面事件，也可能是业务含义较深，能够牵一发而动全身的。界面是怎么来的？是由初始界面加上状态形成的，为了能够反映界面的变化，我们必须使得对业务模型的每一个扰动都收敛到确切的状态，所以，这也就是Redux这类东西的意义所在。
再插另外一句：很多人吐槽Angular大而全笨重，吐槽React全家桶，但其实世界上大部分人是没有框架整合能力的，小而美的库最后整合了，在面临各种业务需求之后不断引入新模块，也还是一个大而全的方案。在绝大部分场景下，还是有一整套标配模块比较好。你看ExtJS他也多带带提供ExtCore模块，但不但竞争不过jQuery，连mootools和prototype都竞争不过，用它的人几乎都是用全方案的。
3. 效率
效率也分两种，一种是开发效率，一种是运行效率。
我们前面提到，组件化，这是提升开发效率的一种手段，在组件化这个点上，各路框架的组织方式大同小异，反正最终都是组件树。具体到单个组件的实现上，我个人是倾向于MVVM流的，之前做过对比，MVVM系的代码量会少一些，开发效率稍高一点。
其中，Angular因为实现的特殊性，有作用域继承之类的双刃剑黑魔法，开发效率的不稳定因素要高不少，深刻理解的人用起来效率很高，不理解的用了到处是坑。
再看运行效率，这里面，Angular是较低的那个，主要在于数据变更检测方式，但这也不是绝对的，在部分场景下，脏检测未必就没有优势，这个记得@郑海波论述过。
运行效率的另外一面主要是创建和修改DOM，在创建上，大家是没有太大差异的，而在修改DOM的时候，React首创的虚拟DOM有很大优势，所以其他框架内部实现也在逐渐借鉴。
如果看到这里，很可能你会疑惑，题目问的明明是学哪个好，我说这些是什么意思？
我用这些篇幅说明了Web应用的业务开发中存在哪些麻烦，每种技术又是来解决什么痛点的，这样，你可以按照自己的需求去，结合业务场景进行分析，然后选择需要的挨个学下去。
其实学API之类的很快，还是要把自己业务中的难点想清楚，带着问题去学，带着需求去学，学思想重于学使用，一定能事半功倍。
引用尤雨溪的话：
想要只学一个一劳永逸，那是不可能的。好好打基础，然后多尝试不同风格的框架，因为只有尝试过后才能理解比如@徐飞提到的各种权衡，也只有尝试过后才能知道哪个能真正提升自己的开发效率。说没精力，那是借口。
跟大家共勉一句话：
对很多人来说，技术都不是一生的职业导向，那么，提升自己的眼界，站在更高的角度思考问题就显得尤为重要，从自己，到团队，公司，再到整个业界，眼界宽广了，技术也就是你的左膀右臂。——陈韬
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/88395.html
摘要：，谷歌给的一份性能指南和最佳实践。目前而言，前端社区有三大框架和。随后重点讲述了和两大前端框架，给出了大量的文章教程和相关资源列表。我认为，使用函数式编程方式，更加符合后端程序员的思路，而是更符合前端工程师习惯的框架。 showImg(https://segmentfault.com/img/bVbjQAM?w=1142&h=640); 这个是我订阅 陈皓老师在极客上的专栏《左耳听风》...
摘要：，谷歌给的一份性能指南和最佳实践。目前而言，前端社区有三大框架和。随后重点讲述了和两大前端框架，给出了大量的文章教程和相关资源列表。我认为，使用函数式编程方式，更加符合后端程序员的思路，而是更符合前端工程师习惯的框架。 showImg(https://segmentfault.com/img/bVbjQAM?w=1142&h=640); 这个是我订阅 陈皓老师在极客上的专栏《左耳听风》...
摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。 特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。 本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...
摘要：对于前端，有时候需要实现视图层和数据层的双向绑定例如当前流行的各种框架和类库。为代表前端数据劫持。参考资料实现数据双向绑定的三种方式谈谈中的双向数据绑定非常简单的双向数据绑定框架三 对于前端，有时候需要实现视图层和数据层的双向绑定(two-way-binding), 例如当前流行的各种框架和类库:Vue.js、Angular.js、React.js。 然而，他们最原始的实现方式其实都相...
摘要：一团队组织网站说明腾讯团队腾讯前端团队，代表作品，致力于前端技术的研究腾讯社交用户体验设计，简称，腾讯设计团队网站腾讯用户研究与体验设计部百度前端研发部出品淘宝前端团队用技术为体验提供无限可能凹凸实验室京东用户体验设计部出品奇舞团奇虎旗下前 一、团队组织 网站 说明 腾讯 AlloyTeam 团队 腾讯Web前端团队，代表作品WebQQ，致力于前端技术的研究 ISUX 腾...
阅读 2524·2021-10-19 11:41
阅读 2388·2021-09-01 10:32
阅读 3343·2019-08-29 15:21
阅读 1708·2019-08-29 12:20
阅读 1114·2019-08-29 12:13
阅读 568·2019-08-26 12:24
阅读 2492·2019-08-26 10:26
阅读 726·2019-08-23 18:40
