澳门新浦京娱乐场网站-www.146.net-新浦京娱乐场官网
做最好的网站

angular种类学习笔记,React与Vue的相比较详解

Angular说:这个锅我不背

2016/05/30 · JavaScript · 2 评论 · AngularJS, React

本文作者: 伯乐在线 - 亚里士朱德 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

JavaScript 框架和库可以说是开源项目中最庞大也是最累的类目了,目前在github 上这一类的项目是最多的,并且几乎每隔一段时间就会出现一个新的项目席卷网络社区,虽然这样推动了创新的发展,但不得不说苦了前端的开发者们。因此本文罗列出了一些优秀的 Javascript 框架和库的特及其在 github 上的 star 数,旨在为各位开发者提供一些参考。

前端这几年的技术发展很快,细分下来,主要可以分成四个方面:

近几年前端的技术发展很快,细分下来,主要可以分成四个方面:

现前端框架情况, angular、vue(比较火)、react。react因前段时间license协议,百度要求内部停止使用react。

楔子

最近月影大神翻译的一篇文章很火——《别责怪框架:我使用 AngularJS 和 ReactJS 的经验》,标题看似客观,不过先扬后抑,借黑Angular之际狠赞了一下React。

看完之后也让我有感而发。写这篇文章的目的,并不是想反作者之道,褒Angular贬React,只是希望读者抛开个人情绪,对两者(或者Angular?)有一个更客观地认识。

图片 1

  1. 开发语言技术,主要是ES6&7,coffeescript,typescript等;
  2. 开发框架,如Angular,React,Vue.js,Angular2等;
  3. 开发工具的丰富和前端工程化,像Grunt,Gulp,Webpack,npm,eslint,mocha这些技术;
    就开发框架这块,Angular(1&2),React,Vue目前占据着主流地位而且会相持比较长的一段时间,所以这里对比一下这三门技术,以便之后的技术选型。

      1.开发语言技术,主要是ES6&7,coffeescript,typescript等;

新的框架层出不穷:它难吗?它写得快吗?可维护性怎样?运行性能如何?社区如何?前景怎样?好就业吗?好招人吗?组建团队容易吗?不管哪个,选择一个实践就好。

ReactJS与Angular

还记得一年前刚接触Angular的时候感觉既惊喜又恐惧。惊喜的是双向绑定、指令…这些功能太炫酷了,恐惧的是感觉是在重新学习一门新的语言,如果说小米重新定义了手机的话,那么Angular应该是重新定义了javascript。

它的模块功能以及依赖注入很像AMD规范的requirejs,它的视图数据绑定更像是DOM操作升级版,它的路由功能又与backbone有异曲同工之妙,内置的$q$http服务很好的解决了异步通信问题,不和jquery冲突的同时内置了类似jquery风格的原生DOM操作方式…最难能可贵的是,它还提供了单元测试和端到端的解决方案。

而对ReactJS我还只停留在hello world的层次,曾经在知乎上看到有人评价react的时候说是因为Angular的指令系统太难学,所以搞了一套这个玩意,不知真假。参考官网宣传及各种文章对react的吹捧,觉得优点应该有3个吧:

1、ReactJS(Star: 59989,Fork: 10992)

一. 趋势

Vue.js

图片 2

Reactjs

图片 3

Angularjs

图片 4

2.对比
虽然放在一起Angular还是最火的,但从单个趋势图可以看出来reactjs和vuejs明显是火箭一般上升。很明显可以看到Angular在16时候有个大跌幅,那时候正是React坐火箭上升最快的。就是那时候很多Angular的项目转成了React。如果Angular没有出2,那估计Angular就真的离灭亡不远了。

图片 5

3.GitHub受欢迎程度

图片 6

4.定位
虽然Vue.js被定义为MVC framework,但其实Vue本身还是一个library,加了一些其他的工具,可以被当成一个framework。ReactJS也是library,同样道理,配合工具也可以成为一个framework。AngularJS(本文AngularJS特指Angular 1, Angular 2特指第二版Angular)是一个framework,而Angular 2虽然还是一个framework,但其实在设计之初,Angular 2的团队站在了更高的角度,希望做一个platform。
5.上手容易度
angular种类学习笔记,React与Vue的相比较详解。Vue.js hello world

图片 7

ReactJS hello world

图片 8

** 6.文档清晰度**
现在的前端framework,用起来就像按照说明书使用家用电器一样。按照文档一步步写就好了,所以文档的清晰度非常重要。同时小伙伴也很重要,越多的人使用,那遇到一样问题的人就越多,stackoverflow上面可能早就有帮你解决问题的小伙伴了。就这几个来说,我个人认为Vue.js的文档最恳切。我认为结合文档和遇到问题Google答案的匹配度来讲:

Vue.js > ReactJS > AngularJS > Angular 2

      2.开发框架,如Angular,React,Vue.js,Angular2等;

一、Angular 基础

组件化

Angular的指令完全能实现组件化,支持嵌套和数据绑定,它的依赖注入使得引用也非常方便。

主页:https://facebook.github.io/react

二. 数据流

1.Angular 使用双向绑定即:界面的操作能实时反映到数据,数据的变更能实时展现到界面。
实现原理:
$scope
变量中使用脏值检查来实现。像ember.js是基于setter,getter的观测机制,
$scope.$watch
函数,监视一个变量的变化。函数有三参数,”要观察什么”,”在变化时要发生什么”,以及你要监视的是一个变量还是一个对象。
使用ng-model时,你可以使用双向数据绑定。 使用$scope.$watch
(视图到模型)以及$scope.$apply
(模型到视图),还有$scope.$digest
双向绑定的三个重要方法:
$scope.$apply()$scope.$digest()$scope.$watch()
在AngularJS双向绑定中,有2个很重要的概念叫做dirty check,digest loop,dirty check(脏检测)是用来检查绑定的scope中的对象的状态的,例如,在js里创建了一个对象,并且把这个对象绑定在scope下,这样这个对象就处于digest loop中,loop通过遍历这些对象来发现他们是否改变,如果改变就会**调用相应的处理方法来实现双向绑定。

  1. Vue 也支持双向绑定,默认为单向绑定数据从父组件单向传给子组件。在大型应用中使用单向绑定让数据流易于理解
    Vue相比():
    Vue.js 有更好的性能,并且非常非常容易优化,因为它不使用脏检查。Angular,当 watcher 越来越多时会变得越来越慢,因为作用域内的每一次变化,所有 watcher 都要重新计算。
    并且,如果一些 watcher 触发另一个更新,脏检查循环(digest cycle)可能要运行多次。 Angular 用户常常要使用深奥的技术,以解决脏检查循环的问题。有时没有简单的办法来优化有大量 watcher 的作用域。
    Vue.js 则根本没有这个问题,因为它使用基于依赖追踪的观察系统并且异步列队更新,所有的数据变化都是独立地触发,除非它们之间有明确的依赖关系。唯一需要做的优化是在 v-for 上使用 track-by。

  2. React-单向数据流
    MVVM流的Angular和Vue,都是通过类似模板的语法,描述界面状态与数据的绑定关系,然后通过内部转换,把这个结构建立起来,当界面发生变化的时候,按照配置规则去更新相应的数据,然后,再根据配置好的规则去,从数据更新界面状态。
    React推崇的是函数式编程和单向数据流:给定原始界面(或数据),施加一个变化,就能推导出另外一个状态(界面或者数据的更新)。
    React和Vue都可以配合Redux来管理状态数据。

      3.开发工具的丰富和前端工程化,像Grunt,Gulp,Webpack,npm,eslint,mocha这些技术;

1、AngularJS核心

AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML。AngularJS核心是:MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

AngularJS更关注数据展示本身,更新时会尽可能减少对DOM的破坏和重构。
注:jQuery是dom驱动,AngularJS是数据驱动。

虚拟DOM提升性能

PC端上就现代浏览器内核的渲染性能而言,用Angular没出现过什么性能问题。

移动端在操作比较多的DOM时,低端机上会出现卡顿。不过还是有优化方案的,而且Angular本身也是不提倡频繁、大量的操作DOM,比如HTML游戏。

图片 9

三. 视图渲染

  1. AngularJS的工作原理是:HTML模板将会被浏览器解析到DOM中, DOM结构成为AngularJS编译器的输入。AngularJS将会遍历DOM模板, 来生成相应的NG指令,所有的指令都负责针对view(即HTML中的ng-model)来设置数据绑定。因此, NG框架是在DOM加载完成之后, 才开始起作用的。
    React
  2. React 的渲染建立在 Virtual DOM 上——一种在内存中描述 DOM 树状态的数据结构。当状态发生变化时,React 重新渲染 Virtual DOM,比较计算之后给真实 DOM 打补丁
    Virtual DOM 提供了函数式的方法描述视图,它不使用数据观察机制,每次更新都会重新渲染整个应用,因此从定义上保证了视图与数据的同步。它也开辟了 JavaScript 同构应用的可能性。
    超大量数据的首屏渲染速度上,React 有一定优势,因为 Vue 的渲染机制启动时候要做的工作比较多,而且 React 支持服务端渲染
    React 的 Virtual DOM 也需要优化。复杂的应用里可以选择 1. 手动添加 shouldComponentUpdate 来避免不需要的 vdom re-render;2. Components 尽可能都用 pureRenderMixin,然后采用 Flux 结构 Immutable.js。其实也不是那么简单的。相比之下,Vue 由于采用依赖追踪,默认就是优化状态:动了多少数据,就触发多少更新,不多也不少
    React 和 Angular 2 都有服务端渲染和原生渲染的功能。
  3. Vue.js 不使用 Virtual DOM 而是使用真实 DOM 作为模板,数据绑定到真实节点。Vue.js 的应用环境必须提供 DOM。Vue.js 有时性能会比 React 好,而且几乎不用手工优化。

      4.前端开发范围的扩展,如服务端的nodejs,express,koa,meteor,GraphQL;移动端和跨平台的PhoneGap,ionic,ReactNative,Weex;计算机图形学和3维建模领域的WebGL(three.js等);可视化与数据分析领域的d3.js等;包括浏览器不断开放的更多新特性和接口比如svg,canvas,蓝牙,电池,本地存储,service worker,Houdini等新的API能力,以及像WASM这样的底层优化技术;

2、AngularJS的MVVM模式

angular中关于MVVM模式的运用,Model-View-ViewMode(模型-视图-视图模型)

图片 10

MVVM模式

在angular中MVVM模式主要分为四部分:

1)View:它专注于界面的显示和渲染,在angular中则是包含一堆声明式Directive的视图模板。
2)ViewModel:它是View和Model的粘合体,负责View和Model的交互和协作。
3)Model:它是与应用程序的业务逻辑相关的数据的封装载体。
4)Controller:这并不是MVVM模式的核心元素,但它负责ViewModel对象的初始化。

React Native

我看好React的原因很大程度在于它,这种跨平台能力还是很有价值的。这一点也是可以秒杀Angular的,不过目前还不了解是否有成熟的大型应用~

React.js(React)是一个用来构建用户界面的 JavaScript 库,主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源。React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。

四. 性能与优化

性能方面,这几个主流框架都应该可以轻松应付大部分常见场景的性能需求,区别在于可优化性和优化对于开发体验的影响。Vue 的话需要加好 track-by 。React 需要 shouldComponentUpdate 或者全面 Immutable,Angular 2 需要手动指定 change detection strategy。从整体趋势上来说,浏览器和手机还会越变越快,框架本身的渲染性能在整个前端性能优化体系中,会渐渐淡化,更多的优化点还是在构建方式、缓存、图片加载、网络链路、HTTP/2 等方面。

就开发框架这块,Angular(1&2),React,Vue目前占据着主流地位而且会相持比较长的一段时间,所以这里对比一下这三门技术,以便之后的技术选型。

3、Angularjs执行流程:

图片 11

解决方案

对于文中所提问题,我以自己对Angular的粗浅了解,花了几分钟,试着解答了一下~

1.改变 URL 的时候不重新加载 controller 或者渲染基础模板。

如果认真看了官方文档关于$location服务的介绍之后,要解决这个问题并不难。通过$location服务在hash值中添加url参数,这个参数不在路由中配置就不会刷新controller和视图,同时,又可以通过$location服务来获取它。具体方法我已写在了issue上。

2.想要从一个准备发送给服务器的 JSON 中移除一些空白字段时,发现 UI 中对应的数据也被一并移除了 —— 丫的双向绑定 ╮(╯▽╰)╭。

双向绑定应该是利大于弊的(虽然脏检测机制经常遭人诟病),基本上不再需要手动操作DOM。简化了逻辑,少了很多重复代码,同时也减少了视图与数据层忘记同步带来的错误。

这个问题当然也非常好解决,前提是如果你读过官方文档关于表达式的表述。那就是用用双冒号::可以实现单次绑定,之后操作数据就不会再与视图同步了,或者直接创建一个只含需要属性的新对象更简单,方法很多~

3.当想要使用 ngShow 和 ngHide 来显示一个 HTML 块同时隐藏另一个 HTML 块时,在一瞬间,两者同时显示了。

ng-cloak和loading页,随便选一个即可。

React 特点:

五. 模块化与组件化

Angular1 -> Angular2
Angular1使用依赖注入来解决模块之间的依赖问题,模块几乎都依赖于注入容器以及其他相关功能。不是异步加载的,根据依赖列出第一次加载所需的所有依赖。
可以配合类似于Require.js来实现异步加载,懒加载(按需加载)则是借助于 ocLazyLoad 方式的解决方案,但是理想情况下应该是本地框架会更易懂。
Angular2使用ES6的module来定义模块,也考虑了动态加载的需求。
Vue
Vue中指令和组件分得更清晰指令只封装 DOM 操作,而组件代表一个自给自足的独立单元 —— 有自己的视图和数据逻辑**。在 Angular1 中两者有不少相混的地方。

React
一个 React 应用就是构建在 React 组件之上的。 组件有两个核心概念:props,state。 一个组件就是通过这两个属性的值在 render 方法里面生成这个组件对应的 HTML 结构。
传统的 MVC 是将模板放在其他地方,比如 script 标签或者模板文件,再在 JS 中通过某种手段引用模板。按这种思路,想想多少次我们面对四处分散的模板片段不知所措?纠结模板引擎,纠结模板存放位置,纠结如何引用模板。
React 认为组件才是王道,而组件是和模板紧密关联的,组件模板和组件逻辑分离让问题复杂化了。所以就有了 JSX 这种语法,就是为了把 HTML 模板直接嵌入到 JS 代码里面,这样就做到了模板和组件关联,但是 JS 不支持这种包含 HTML 的语法,所以需要通过工具将 JSX 编译输出成 JS 代码才能使用(可以进行跨平台开发的依据,通过不同的解释器解释成不同平台上运行的代码,由此可以有RN和React开发桌面客户端)

一、数据流

4、单页面应用(使用ui-rounter)

单页应用是指在浏览器中运行的应用,它们在使用期间不会重新加载页面。单页应用是一种从Web服务器加载的富客户端。

单页Web应用,顾名思义,就是只有一张Web页面的应用。浏览器一开始会加载必需的HTML、CSS和JavaScript,之后所有的操作都在这张页面上完成,这一切都由JavaScript来控制。因此,单页Web应用会包含大量的JavaScript代码,复杂度可想而知,模块化开发和设计的重要性不言而喻。


二、angular UI-Router路由

通过 AngularJS 可以实现多视图的单页Web应用。

AngularJS 路由 就通过 # 标记 帮助我们区分不同的逻辑页面并将不同的页面绑定到对应的控制器上。

图片 12

路由流程图

UI-Router被认为是AngularUI为开发者提供的最实用的一个模块。开发者可以创建嵌套分层的视图、在同一个页面使用多个视图、让多个视图控制某个视图等更多的功能。即使是非常复杂的web应用,UI-Router也可以极佳地驾驭。

1、ui-sref 指令链接到特定状态
<a ui-sref="contacts.list">Contacts</a>

2、包含模块
angular.module('uiRouter', ['ui.router']);

3、ui-sref-active 查看当前激活状态并设置 Class
<li ui-sref-active="active"><a ui-sref="about">About</a></li>

4、ng-view
该 div 内的 HTML 内容会根据路由的变化而变化。
<div ui-view></div>  嵌套 View

5、方便获得当前状态的方法,绑到根作用域
app.run(['$rootScope', '$state', '$stateParams',
  function($rootScope, $state, $stateParams) {
  $rootScope.$state = $state;
  $rootScope.$stateParams = $stateParams;
}]);

6、abstract 抽象模板(虚拟路由abstract:true先执行user, 再进入controller)
抽象模板不能被激活,但是它的子模板可以被激活。抽象模板可以提供一个包括了多个有名的视图的模板,或者它可以传递作用域变量$scope给子模板。

7、路由重定向 $urlRouterProvider


三、angular基础常见问题

1、angular 的数据绑定采用什么机制?详述原理

脏检查机制。

双向数据绑定是 AngularJS 的核心机制之一。当 view 中有任何数据变化时,会更新到 model ,当 model 中数据有变化时,view 也会同步更新,显然,这需要一个监控。

原理就是,Angular 在 scope 模型上设置了一个 监听队列,用来监听数据变化并更新 view 。每次绑定一个东西到 view 上时 AngularJS 就会往$watch队列里插入一条$watch,用来检测它监视的 model 里是否有变化的东西。当浏览器接收到可以被 angular context 处理的事件时,$digest循环就会触发,遍历所有的$watch,最后更新 dom。

2、angularjs ng-if ng-show ng-hide区别

在使用anularjs开发前端页面时,常常使用ng-show、ng-hide、ng-if功能来控制页面元素的显示或隐藏

1、操作dom元素不同:
1)ng-show/ng-hide是通过修改样式控制元素显示与隐藏,对应的DOM元素会一直存在于当前页面中。

2)ng-if根据表达式的值动态的在当前的页面中添加删除页面元素。

2、在作用域方面
1)当一个元素被ng-if从DOM中删除时,与其关联的作用域也会被销毁。而且当它重新加入DOM中时,则会生成一个新的作用域,而ng-show和ng-hide则不会。

注:
ng-hide="true" 设置 HTML 元素不可见。
ng-hide="false" 设置 HTML 元素可见。

3、angularjs scope rootscope 区别(重要)

scope是html和单个controller之间的桥梁,数据绑定就靠他了。
rootscope是各个controller中scope的桥梁。

如何产生$rootScope和$scope?
1、Angular解析ng-app然后在内存中创建$rootScope。
2、Angular会继续解析,找到{{}}表达式,并解析成变量。
3、接着会解析带有ng-controller的div然后指向到某个controller函数。这个时候在这个controller函数变成一个$scope对象实例。
例如:$scope.addServe = function () {}

4、angular 应用路由库及区别

1、Angular1.x 中常用 ngRoute 和 ui.router
2、无论是 ngRoute(Angular 自带的路由模块) 还是 ui.router(第三方模块),都必须以 模块依赖 的形式被引入。
3、ui.router 是基于 state (状态)的, ngRoute 是基于 url 的,ui.router模块具有更强大的功能,主要体现在视图的嵌套方面。(虚假路由)

5、ng-include 和 ng-view区别:

ng-include 指令用于包含外部的 HTML 文件
<div ng-include="'views/apply_bl.html'"></div>
使用ng-view.这个方法通过使用路由控制,可以方便的实现页面组合。
ng-include就是将多个页面的公共页面提取出来,如header.html,footer.html等,在每个页面用来引入。


四、现项目运用技术点

一、A项目 (开发模式:前端 后端)

1、angular 1.4.8 版本
2、组件化:1)插件    2)自定义指令 directive 来做组件化
3、Angular ocLazyLoad动态化加载脚本
4、Angular-UI-Router 虚拟路由  [(homeconsole)虚拟路由来复用的]
5、requirejs异步加载
6、UI-bootstrap组件    bootstrap( url地址改变)
7、restfulAPI 协议写相应接口
8、golang、java语言开发

二、B项目 (开发模式:前端 node)

1、Yeoman Angular Gulp 环境搭建
2、angular v1.5.11 版本
3、Angular-UI-Router 虚拟路由  [(homeconsole)虚拟路由来复用的]
4、gulpfile  主要
     1、babel  es6转es5
     2、gulp-uglify  JS文档压缩
     3、gulp-sass  编译sass文件至css文件
     4、……
5、node做服务器执行过程:
      一、前端。取接口,展示数据
      二、后端。(接口协议要遵循 RESTful API )
            (1)node的框架Express。
              node作用:
              1)当服务器
              2)接口设置
              3)在node中,通过Sequelize操作mysql数据库之增删改查。
三、mysql(数据库)
数据库,设置具体数据。

写在最后

很多人都有一种畏难的心理,放弃学习Angular,或者向之前文章作者那样赶鸭子上架地被迫学习,从而变得痛恨,(就像你没有使用过VIM就无法理解为什么它被称作编辑器之神,不知道它是如何依靠“模式”来实现无鼠标操作光标,不知道它的宏之强大…)这其实是一种损失。因为Angular确实是一个优秀的框架,它的优秀不仅仅在于前面我说的那些优点。它不单单是强大的开发框架,更像是饱含了作者设计思想和理念的艺术品(当你阅读完官网开篇介绍的最后一部分:Angular的禅道之时愈发会有此感)。

最后引用罗胖说过的一句话做为文章的结尾。

“我创业之后越来越少负面地区评价一个人和一件事,是因为我清楚地知道,一旦我做出这样一个结论,以我的知识和逻辑能力,我马上会编造一套理由,在自己内心里来论证自己这个判断。而因此的结果就是我从此丧失了对这个人这个事代表的所有现象的好奇心和求知欲,也就是说,我认知的大门就关上了。”

打赏支持我写出更多好文章,谢谢!

打赏作者

  1.声明式设计−React采用声明范式,可以轻松描述应用。

六. 语法与代码风格

React,Vue,Angular2都支持ES6,Angular2官方拥抱了TypeScript这种 JavaScript 风格。
React 以 JavaScript 为中心,Angular 2 依然保留以 HTML 为中心。Angular 2 将 “JS” 嵌入 HTML。React 将 “HTML” 嵌入 JS。Angular 2 沿用了 Angular 1 试图让 HTML 更强大的方式。
React 推荐的做法是 JSX inline style,也就是把 HTML 和 CSS 全都整进 JavaScript 了。Vue 的默认 API 是以简单易上手为目标,但是进阶之后推荐的是使用 webpack vue-loader 的单文件组件格式(template,script,style写在一个vue文件里作为一个组件)

数据绑定

打赏支持我写出更多好文章,谢谢!

任选一种支付方式

图片 13 图片 14

1 赞 3 收藏 2 评论

  2.高效−React通过对DOM的模拟,最大限度地减少与DOM的交互。

七. 一些大公司使用例子

Angular 使用双向绑定即:界面的操作能实时反映到数据,数据的变更能实时展现到界面。

关于作者:亚里士朱德

图片 15

微信公众号“web学习社”;js全栈工程师,熟悉node.js、mongoDB。开发者头条top10专栏作者慕课网签约讲师个人博客:yalishizhude.github.io 个人主页 · 我的文章 · 19 ·     

图片 16

  3.灵活−React可以与已知的库或框架很好地配合。

1. Vue

滴滴出行, 还出了一本书 Vue.js 权威指南饿了么,开源了一个基于Vue的UI库 GitHub - ElemeFE/element: Desktop UI elements for Vue.js 2.0**
阿里的 weex GitHub - alibaba/weex: A framework for building Mobile cross-platform UI**
GitLab选择了Vue https://about.gitlab.com/2016/10/20/why-we-chose-vue/**
小米移动商城
饿了么
苏宁易购触屏版、

实现原理:

  4.JSX− JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ,但我们建议使用它。

2. React

阿里,React 和React-native (杭州)
知乎的评论功能

$scope变量中使用脏值检查来实现。像ember.js是基于setter,getter的观测机制,

  5.组件− 通过 React 构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中。

3. angular2

新出的例子少

$scope.$watch函数,监视一个变量的变化。函数有三参数,”要观察什么”,”在变化时要发生什么”,以及你要监视的是一个变量还是一个对象。

  6.单向响应的数据流− React 实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单。

八. 总结

使用ng-model时,你可以使用双向数据绑定。

2、AngularJS(Star: 54769,Fork: 27292)

1. 上手难度

Vue < react < angular

使用$scope.$watch(视图到模型)以及$scope.$apply(模型到视图),还有$scope.$digest

主页:https://angularjs.org

2. 使用场景

Vue React 覆盖中小型,大型项目。
angular 一般用于大型(因为比较厚重)。
优缺点

调用$scope.$watch时只为它传递了一个参数,无论作用域中的什么东西发生了变化,这个函数都会被调用。在ng-model中,这个函数被用来检查模型和视图有没有同步,如果没有同步,它将会使用新值来更新模型数据。

图片 17

3. 渲染性能

Vue> react >angular

图片 18

渲染性能

双向绑定的三个重要方法:

Angular JS (Angular.JS) 是一组用来开发 Web 页面的框架、模板以及数据绑定和丰富 UI 组件。它支持整个开发进程,提供 Web 应用的架构,无需进行手工 DOM 操作。 AngularJS 很小,只有 60K,兼容主流浏览器,与 jQuery 配合良好。

4. 前端库实力参数对比

图片 19

image.png

以上3大框架均不支持IE8以下;
IE9以下解决方法:Bootstrap (在IE8也会不支持一些样式和属性) jQuery;
其他框架稳定性欠缺

$scope.$apply()

$scope.$digest()

$scope.$watch()

3、Vue.js(Star: 43608, Fork: 5493)

在AngularJS双向绑定中,有2个很重要的概念叫做dirty check,digest loop,dirty check(脏检测)是用来检查绑定的scope中的对象的状态的,例如,在js里创建了一个对象,并且把这个对象绑定在scope下,这样这个对象就处于digest loop中,loop通过遍历这些对象来发现他们是否改变,如果改变就会调用相应的处理方法来实现双向绑定

Vue 也支持双向绑定,默认为单向绑定,数据从父组件单向传给子组件。在大型应用中使用单向绑定让数据流易于理解。

图片 20

脏检测的利弊

Vue.js是构建 Web 界面的 JavaScript 库,提供数据驱动的组件,还有简单灵活的 API,使得 MVVM 更简单。

和ember.js等技术的getter/setter观测机制相比(优):

主要特性:

getter/setter当每次对DOM产生变更,它都要修改DOM树的结构,性能影响大,Angular会把批量操作延时到一次更新,性能相对较好。

  ●可扩展的数据绑定

和Vue相比(劣):

  ●将普通的 JS 对象作为 model

Vue.js 有更好的性能,并且非常非常容易优化,因为它不使用脏检查。Angular,当 watcher 越来越多时会变得越来越慢,因为作用域内的每一次变化,所有 watcher 都要重新计算。并且,如果一些 watcher 触发另一个更新,脏检查循环(digest cycle)可能要运行多次。 Angular 用户常常要使用深奥的技术,以解决脏检查循环的问题。有时没有简单的办法来优化有大量 watcher 的作用域。Vue.js 则根本没有这个问题,因为它使用基于依赖追踪的观察系统并且异步列队更新,所有的数据变化都是独立地触发,除非它们之间有明确的依赖关系。唯一需要做的优化是在 v-for 上使用 track-by。

  ●简洁明了的 API

React-单向数据流

  ●组件化 UI 构建

MVVM流的Angular和Vue,都是通过类似模板的语法,描述界面状态与数据的绑定关系,然后通过内部转换,把这个结构建立起来,当界面发生变化的时候,按照配置规则去更新相应的数据,然后,再根据配置好的规则去,从数据更新界面状态。

  ●配合别的库使用

React推崇的是函数式编程和单向数据流:给定原始界面(或数据),施加一个变化,就能推导出另外一个状态(界面或者数据的更新)。

4、jQuery(Star: 43432, Fork: 12117)

React和Vue都可以配合Redux来管理状态数据。

主页:https://jquery.com/

二、视图渲染

图片 21

Angular1

JQuery 是轻量级的js库(压缩后只有21k) ,它兼容CSS3,还兼容各种浏览器 (IE 6.0 , FF 1.5 , Safari 2.0 , Opera 9.0 )。jQuery使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是,它的文档说明很全,而且各种 应用也说得很详细,同时还有许多成熟的插件可供选择。jQuery能够使用户的html页保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需定义id即可。

AngularJS的工作原理是:HTML模板将会被浏览器解析到DOM中, DOM结构成为AngularJS编译器的输入。AngularJS将会遍历DOM模板, 来生成相应的NG指令,所有的指令都负责针对view(即HTML中的ng-model)来设置数据绑定。因此, NG框架是在DOM加载完成之后, 才开始起作用的。

5、Meteor(Star: 36691,Fork: 4617)

React

主页:http://www.meteor.com

React 的渲染建立在 Virtual DOM 上——一种在内存中描述 DOM 树状态的数据结构。当状态发生变化时,React 重新渲染 Virtual DOM,比较计算之后给真实 DOM 打补丁。

图片 22

Virtual DOM 提供了函数式的方法描述视图,它不使用数据观察机制,每次更新都会重新渲染整个应用,因此从定义上保证了视图与数据的同步。它也开辟了 JavaScript 同构应用的可能性。

Meteor 是一组新的技术用于构建高质量的 Web 应用,提供很多现成的包,可直接在浏览器或者云平台中运行。

在超大量数据的首屏渲染速度上,React 有一定优势,因为 Vue 的渲染机制启动时候要做的工作比较多,而且 React 支持服务端渲染。

6、Angular2(Star:20803,Fork:5367)

React 的 Virtual DOM 也需要优化。复杂的应用里可以选择 1. 手动添加 shouldComponentUpdate 来避免不需要的 vdom re-render;2. Components 尽可能都用 pureRenderMixin,然后采用 Flux 结构 Immutable.js。其实也不是那么简单的。相比之下,Vue 由于采用依赖追踪,默认就是优化状态:动了多少数据,就触发多少更新,不多也不少。

主页:https://angular.io

React 和 Angular 2 都有服务端渲染和原生渲染的功能。

图片 23

Vue.js 不使用 Virtual DOM 而是使用真实 DOM 作为模板,数据绑定到真实节点。Vue.js 的应用环境必须提供 DOM。Vue.js 有时性能会比 React 好**,而且几乎不用手工优化。

Angular 是一款十分流行且好用的 Web 前端框架,目前由 Google 维护。这个条目收录的是 Angular 2 及其后面的版本。由于官方已将 Angular 2 和之前的版本Angular.js分开维护(两者的 GitHub 地址和项目主页皆不相同),所以就有了这个页面。

三、性能与优化

7、Ember.js(Star: 17540,Fork: 3646)

性能方面,这几个主流框架都应该可以轻松应付大部分常见场景的性能需求,区别在于可优化性和优化对于开发体验的影响。Vue 的话需要加好 track-by 。React 需要 shouldComponentUpdate 或者全面 Immutable,Angular 2 需要手动指定 change detection strategy。从整体趋势上来说,浏览器和手机还会越变越快,框架本身的渲染性能在整个前端性能优化体系中,会渐渐淡化,更多的优化点还是在构建方式、缓存、图片加载、网络链路、HTTP/2 等方面。

主页:http://emberjs.com

四、模块化与组件化

图片 24

Angular1 -> Angular2

Ember是一个雄心勃勃的Web应用程序,消除了样板,并提供了一个标准的应用程序架构的JavaScript框架。

Angular1使用依赖注入来解决模块之间的依赖问题,模块几乎都依赖于注入容器以及其他相关功能。不是异步加载的,根据依赖列出第一次加载所需的所有依赖。

8、Polymer(Star:16979,Fork: 1699)

可以配合类似于Require.js来实现异步加载,懒加载(按需加载)则是借助于 ocLazyLoad 方式的解决方案,但是理想情况下应该是本地框架会更易懂。

主页:http://www.polymer-project.org

Angular2使用ES6的module来定义模块,也考虑了动态加载的需求。

图片 25

Vue

在2013年的Google I/O大会上,Google发布了Polymer,它是一个使用Web组件构建Web应用的类库,同时也使用了为Web构建可重用组件的新的HTML 5标准。Polymer为大部分Web组件技术提供了polyfills功能,它能让开发者在所有的浏览器支持新特性前创建自己的可重用组件。此外,Polymer提供了一系列的部件的例子,其中包括天气、时钟、股票行情和线型图。

Vue中指令和组件分得更清晰。指令只封装 DOM 操作,而组件代表一个自给自足的独立单元 —— 有自己的视图和数据逻辑**。在 Angular1 中两者有不少相混的地方。

Polymer中的polyfills为需要使用Web组件成功构建应用提供了多种Web技术,包括:

React

  ●HTML imports:种在其他HTML document中引入和重用HTML document的方法。

一个 React 应用就是构建在 React 组件之上的。

  ●自定义元素:让开发者定义和使用自定义DOM元素。

组件有两个核心概念:props,state。

  ●Shadow DOM:在DOM中提供的封装。

一个组件就是通过这两个属性的值在 render 方法里面生成这个组件对应的 HTML 结构。

  ●模型驱动视图(Model Driven Views):提供象AngularJS的数据绑定。

传统的 MVC 是将模板放在其他地方,比如 script 标签或者模板文件,再在 JS 中通过某种手段引用模板。按这种思路,想想多少次我们面对四处分散的模板片段不知所措?纠结模板引擎,纠结模板存放位置,纠结如何引用模板。

  ●Web动画:实现复杂动画的API。

React 认为组件才是王道,而组件是和模板紧密关联的,组件模板和组件逻辑分离让问题复杂化了。所以就有了 JSX 这种语法,就是为了把 HTML 模板直接嵌入到 JS 代码里面,这样就做到了模板和组件关联,但是 JS 不支持这种包含 HTML 的语法,所以需要通过工具将 JSX 编译输出成 JS 代码才能使用(可以进行跨平台开发的依据,通过不同的解释器解释成不同平台上运行的代码,由此可以有RN和React开发桌面客户端)。

  ●Pointer事件:对鼠标触摸和手写笔事件的封装

五、语法与代码风格

9、Zepto.js(Star: 12074,Fork: 3260)

React,Vue,Angular2都支持ES6,Angular2官方拥抱了TypeScript这种 JavaScript 风格。

主页:https://facebook.github.io/react

React 以 JavaScript 为中心,Angular 2 依然保留以 HTML 为中心。Angular 2 将 “JS” 嵌入 HTML。React 将 “HTML” 嵌入 JS。Angular 2 沿用了 Angular 1 试图让 HTML 更强大的方式。

图片 26

React 推荐的做法是 JSX inline style,也就是把 HTML 和 CSS 全都整进 JavaScript 了。Vue 的默认 API 是以简单易上手为目标,但是进阶之后推荐的是使用 webpack vue-loader 的单文件组件格式(template,script,style写在一个vue文件里作为一个组件)

Zepto.js 是支持移动WebKit浏览器的JavaScript框架,具有与jQuery兼容的语法。2-5k的库,通过不错的API处理绝大多数的基本工作。

总结

10、Riot.js(Star: 11491,Fork: 902)

好了,以上就是这篇文章的全部内容了,本文的话题实际上很大,需要对Angular,React和Vue三门技术有足够深入的了解,所以难免有很多总结的不全或者不够深入的地方,后续我会不断完善和修改。希望本文的内容对大家的学习或者工作能带来一定的帮助。

主页:http://riotjs.com

您可能感兴趣的文章:

  • VSCode配置react开发环境的步骤
  • 深入理解JavaScript的React框架的原理
  • react 父组件与子组件之间的值传递的方法
  • 使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
  • 十分钟带你快速了解React16新特性
  • 深入理解React中es6创建组件this的方法
  • React组件的三种写法总结
  • react在安卓中输入框被手机键盘遮挡问题的解决方法

图片 27

Riot.js是一个客户端模型-视图-呈现(MVP)框架并且它非常轻量级甚至小于1kb.尽管他的大小令人难以置信,所有它能构建的有如下:一个模板引擎,路由,甚至是库和一个严格的并具有组织的MVP模式。当模型数据变化时视图也会自动更新。

当然除了以上提到的这些,还有很多优秀的 Javascript 框架和库,并且几乎每隔一段时间就会涌现一个新的产品。

您可能感兴趣的文章:

  • 深入解析JavaScript框架Backbone.js中的事件机制
  • JavaScript框架是什么?怎样才能叫做框架?
  • 超赞的动手创建JavaScript框架的详细教程
  • javascript框架设计之类工厂
  • javascript框架设计之浏览器的嗅探和特征侦测
  • javascript框架设计之种子模块
  • javascript框架设计之框架分类及主要功能
  • 2014 年最热门的21款JavaScript框架推荐
  • javascript框架设计读书笔记之数组的扩展与修复
  • javascript框架设计读书笔记之字符串的扩展和修复
  • javascript框架设计读书笔记之模块加载系统
  • javascript框架设计读书笔记之种子模块
  • JavaScript框架(iframe)操作总结
  • 怎么选择Javascript框架(Javascript Framework)
  • 详细介绍8款超实用JavaScript框架
  • brook javascript框架介绍
  • 16个最流行的JavaScript框架[推荐]
  • 如何选择适合你的JavaScript框架

本文由澳门新浦京娱乐场网站发布于新浦京娱乐场官网,转载请注明出处:angular种类学习笔记,React与Vue的相比较详解