React,Vue,Angular简介

96
合肥懒皮
2016.12.18 15:56* 字数 2724

一、Angular
参考AngularJS百度百科
AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

参考AngularJS 于前端开发有什么作用,对比其它框架有何优点
未来的发展趋势是前端后端只靠json数据来进行通信:后端只处理和发送一段json数据到前端,然后计算和模板渲染都在前端进行。而前端的改动后,形成json数据然后传回到后端。
未来趋势就是:后台程序再也不做模板的任何处理
AngularJS 的作用简单说就是就是把后台的json值直接用html进行渲染,然后html的操作又直接在形成json传回后台。未来的后台MVC,试图不再是模板了,而是一段结构整齐标准的JSON,而这个JSON作为前台的model直接在AngularJS直接使用。或者说后台的试图是前台的模型,而整个前台就是后台的视图。后台程序再也不做模板的任何处理了。Angular是框架的一种,不学也能开发前端。学backbone或者ember也能开发前端。没有js的mvc,就光弄个jquery,也能开发前端。

参考React vs Angular 2: 冰与火之歌

  • Angular 是一个完整的框架
  • Angular 的核心团队默认在文档中使用 TypeScript。这意味着相关的示例应用和开源项目更有可能保持一致性。
  • Angular 还拥抱了装饰器(decorator)而不是继承(extends)——很多人认为这也是个加分项
  • Angular 2 还拥抱了 Web Component 标准。固然 Web Components 的浏览器支持度依然很弱,但长期来看,对 Web Components 友好是很大的优势。

有关Angular 2.0的一切

二、React

参考React vs Angular 2: 冰与火之歌

  • JSX 是一种类似 HTML 的语法,但它实际上会被编译成 JavaScript。将标签与代码混写在同一个文件中意味着输入一个组件的函数或者变量时你将享受到自动补全的福利。JSX 编译器会指出你手抖的具体行号,彻彻底底加速你的开发。相反,当你在 Angular 2 中不小心敲错了一个变量时,鸦雀无声。Angular 2 并不会在编译时做什么,它会等到运行时才静默报错。它报错得如此之慢,我加载完整个应用然后奇怪为什么我的数据没有显示出来呢?这太不爽了。

  • React 以 JavaScript 为中心
    终于来了。这才是 React 和 Angular 的根本区别。很不幸,Angular 2 仍然是以 HTML 而非 JavaScript 为中心的。Angular 2 并没有解决它设计上的根本问题:Angular 2 继续把 “JS” 放到 HTML 里。React 则把 “HTML” 放到 JS 里。这种分歧带来的影响真是再怎么强调也不为过。它们从根本上影响着开发体验。Angular 以 HTML 为中心的设计留下了巨大的缺陷。正如我在 JSX:硬币的另一面 中所说的,JavaScript 远比 HTML 要强大。因此,增强 JavaScript 让其支持标签要比增强 HTML 让其支持逻辑要合理得多。无论如何,HTML 与 JavaScript 都需要某种方式以粘合在一起。React 以 JavaScript 为中心的思路从根本上优于 Angular、Ember、Knockout 这些以 HTML 为中心的思路。
    我们不妨品味下当今流行的 JS 框架/库都是如何实现遍历的:

Ember: {{# each}}
Angular 1: ng-repeat
Angular 2: ngFor
Knockout: data-bind="foreach"
React: 直接用 JS 就好啦 :)

除了 React,所有其它框架都用自己的专有语法重新发明了一个我们在 JavaScript 常见得不能再常见的东西:循环。这大概就是 React 的美妙之处,利用 JavaScript 的力量来处理标签,而不是什么奇怪的新语法。

  • React 是一个类库。它的哲学与 Angular、Ember 这些大而全的框架恰恰相反。你可以根据场景挑选各种时髦的类库,搭配出你的最佳组合。JavaScript 世界在飞速发展,React 允许你不断用更好的类库去迭代你应用中的每个小部分,而不是傻等着你选择的框架自己升级。

三、Angular React对比
参考2014 年末有哪些比较火的 Web 开发技术?
我解释一下为什么Angular能够这么火,它主要解决的是哪个层面的问题呢?它解决的是快速开发的问题。我们知道,有很多b/s化的产品,其本质还是像c/s,只是把这个c做到浏览器里来了,这样的一些系统,它免不了要在浏览器中写大量js,然后使用某种ui框架,它的协同开发人员数量会相对较大,代码量也会很多,在这类系统的开发过程中,从成本的角度要解决两个问题:

怎样让开发过程尽量快?
怎样让变更成本尽量小?

解决这两个问题的办法是组件化。所谓组件化,在传统软件领域可能会有一些成熟方案,但是拿到Web,尤其Web前端这个层面,基本没有一种通用方案。组件化并不仅仅要解决“控件”这个层面的问题,还需要把业务数据和逻辑也做规约,理清他们之间的关系,而Angular“碰巧”在这个方面很有帮助,它把UI和业务逻辑隔离得干干净净,模块之间使用依赖注入来维系关系,易测试,可复用,作为架构师,也可以比较容易地对整个项目有所把控。

我们看到很多人跟风学Angular,有很大一部分并未抓住其实质,而是被一些边角优势所吸引,因此用的过程中各种痛苦,如果能够先认识到它的本质优点所在,并且认识到它确实适合自己的项目,一定能得心应手,左右逢源。

为什么很多人被React吸引呢,因为他从另外一个层面解决组件化的问题,而这种方式可能对前端来说更友好,而且还能够在服务端解析模板。喜欢React的人常常用它的虚拟DOM、精确更新来打击其他框架,诚然,它在这方面做得非常好,但并未高到影响全局的程度。这是什么意思呢,它是一个主要针对DOM组件的库,如果用于完整的大型产品解决方案,还是有所欠缺的,它的优势集中在上层,但其实从宏观角度看,这一层的效率并没有那么重要,比如说你是一架很精巧的挖掘机,自带各种分拣功能,但很多时候,大家是很粗暴地去挖东西,就像挖煤那样,你在细节上有多么高效并不重要,只有在一些需要精确控制的场景下,优势才能发挥出来。况且,当Web Components出来之后,虚拟DOM是有很多没法处理的问题的,而其他框架改进数据绑定的效率之后,也能够把这方面的差距缩小很多。

参考[vue、react和angular 2.x谁是2016年的主流?](vue、react和angular 2.x谁是2016年的主流?)

有牛的干爹并且干爹是靠他吃饭的。Facebook的网站不倒闭,React就一直会有人维护。这年头选一个框架最担心的就是过了一年,发现就只有我公司一个人用了。谁被坑过谁知道。Angular2也是有牛的干爹的,可是google并不靠他吃饭。再说从Angular1到Angular2的这么坎坷的转换来看,我是不愿意再来一次担惊受怕的。
组件是React最核心的优势。简单,暴力而且非常有效。composition vs inheritance,至少在UI层面,组件/composition用起来真的方便。

参考angular 和 React 想选择一个学习,哪个比较好?
接下来的主流框架大概会越来越像 Flex 的 MXML + AS3 + (SWF, SWC, CSS) 之于 HTML + ES6 + CSS3,等到 HTML 的 WebComponents 和 ES6 逐渐稳定之后,应该就会来解决麻烦的动画&特效的开发方式了。

四、Vue
参考对比其他框架

React 和 Vue 有许多相似之处,它们都有:

  • 使用 Virtual DOM
  • 提供了响应式(Reactive)和组件化(Composable)的视图组件。
  • 将注意力集中保持在核心库,伴随于此,有配套的路由和负责处理全局状态管理的库。

参考Vue 和 React 的使用场景和深度有何不同?
React 推荐的做法是 JSX + inline style,也就是把 HTML 和 CSS 全都整进 JavaScript 了。Vue 的默认 API 是以简单易上手为目标,但是进阶之后推荐的是使用 webpack + vue-loader 的单文件组件格式.

Vue 的理念问题

  • ember有个cli可以一键生成项目,vue就出了个vue-cli。
  • react出了jsx之后,vue也添加了对jsx的支持,react的vdom号称性能牛逼,vue2.0就也实现了vdom。
  • react有reflux、redux实现单项数据流,vue就也实现了个vuex。
  • vue的出现就是对angular 1.x的模仿,无论是模版还是双向绑定。
  • vue总是在借鉴、模仿别人,将别人的思想重新实现一遍。

vue,angular,avalon这三种MVVM框架之间有什么优缺点?
http://tech.163.com/12/0316/16/7SNVLAD000094L5O_all.html
国内有哪些公司在用Vue.js,有什么心得
demo:炉石工具**
github:GitHub - nullest/hearthstone: A Demo For VueJs with laravel http://lushi.zhujunwu.cn/**

js+ts