2017-08-15 09:44:18 weixin_34061555 阅读数 0

Angular2、AngularJS、React、vue.js过去一年的Google、百度趋势分析

最近在学angular,但是在国内的话似乎是vuejs比较火,百度指数只有国内数据分析,于是翻了下墙上谷歌趋势搜索了以下关键词,包括angualr、angular2、angularjs、react和vuejs:

对比热词

下图是进行了过去一年全球的比较,这个结果是网页搜索的结果,对应颜色可以看到相应的折线图,angular整体很高,react第二,angularjs依旧占据很大份额,angular2比较平缓,vuejs的话是最少的。

Google全球

限制到中国,结果发生了比较大的逆转,react远高于其余三者,并且呈上升趋势,angular整体平稳,但也许是angularjs热度降低而angular2上升,vuejs表现依旧最弱。

Google中国

接下来是用了百度指数分析,时间设置错了,是过去的14个月里变化趋势,可以看到绿色线条是angular2,高到有些可怕。

百度中国

还有其他的图表分析,仔细看的话会发现数据上其实是有交叉的,准确度不能细究,只是个大概的趋势结果。

2018-04-09 14:48:49 mannix_lei 阅读数 1396

vue和angularjs:

1、两者都支持过滤器(自定义过滤器),都支持指令(自定义指令),实现双向绑定的时候都比较简答,不像react那样麻烦。

2、两者都不支持IE8以下的浏览器。

3、vue相对于angular来说要更容易上手,初学者打开菜鸟可以看看,直接看官网也可以,angularjs学习成本很高,需要会不少东西

4、angularjs路由配置比起vue要稍微复杂点,其次,AngularJS依赖对数据做脏检查,所以Watcher越多越慢

5、vue使用基于依赖追踪的观察并且使用异步队列更新。所有的数据都是独立触发的。

这些都是细节问题,个人觉得开发的时候还是要看项目,vue适用于于开发数据量大的项目,具体可以参考这篇文章点击打开链接

vue和react:

1、两者本着一切皆组件的思想。

2、对于类似router这样的核心包也是需要当做第三方插件一样导入的。

3、都有钩子函数

不同点是话不多说看代码:

这是vue版:

<div id="app">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('');
    }
  }
});

这是react版:

 class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      message: 'Hello React.js!'
    };
  }
  reverseMessage() {
    this.setState({ 
      message: this.state.message.split('').reverse().join('') 
    });
  }
  render() {
    return (
      <div>
        <p>{this.state.message}</p>
        <button onClick={() => this.reverseMessage()}>
          Reverse Message
        </button>
      </div>
    )
  }
}
ReactDOM.render(App, document.getElementById('app'));
同样的功能,不一样的代码。
2018-08-20 17:18:27 SummerJX 阅读数 3023

一、数据流

数据绑定

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

实现原理

$scope变量中使用脏值检查来实现。像ember.js是基于setter,getter的观测机制,每次你绑定一些东西到你的UI上时你就会往$watch队列里插入一条$watch。当浏览器接收到可以被angular context处理的事件时,$digest循环就会触发。这个循环是由两个更小的循环组合起来的。一个处理evalAsync队列,另一个处理$watch队列。这就是所谓的dirty-checking。既然所有的$watch都检查完了,那就要问了:有没有$watch更新过?如果有至少一个更新过,这个循环就会再次触发,直到所有的$watch都没有变化。这样就能够保证每个model都已经不会再变化。记住如果循环超过10次的话,它将会抛出一个异常,防止无限循环。 当$digest循环结束时,DOM相应地变化。

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

$scope.$apply()
$scope.$digest()
$scope.$watch()

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

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

采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的settergetter,在数据变动时发布消息给订阅者,触发相应的监听回调。observer用来实现对每个vue中的data中定义的属性循环用Object.defineProperty()实现数据劫持,以便利用其中的setter和getter,然后通知订阅者,订阅者会触发它的update方法,对视图进行更新。在vue中v-model,v-name,{{}}等都可以对数据进行显示,也就是说假如一个属性都通过这三个指令了,那么每当这个属性改变的时候,相应的这个三个指令的html视图也必须改变,于是vue中就是每当有这样的可能用到双向绑定的指令,就在一个Dep中增加一个订阅者,其订阅者只是更新自己的指令对应的数据,也就是v-model='name'和{{name}}有两个对应的订阅者,各自管理自己的地方。每当属性的set方法触发,就循环更新Dep中的订阅者。

二、视图渲染

Angular1

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

React

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 都有服务端渲染和原生渲染的功能。

Vue.js 

不使用 Virtual DOM 而是使用真实 DOM 作为模板,数据绑定到真实节点。Vue.js 的应用环境必须提供 DOM。Vue.js 有时性能会比 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开发桌面客户端)。

vue-angular

1.vue在设计之初参考了很多angular的思想

2.vue相比于angular来说更加的简单

3.vue相当于angular要变得小巧很多,运行速度比angular快

4.vue和angular绑定都可以用{{}}

5.vue指令用v-xxx,angular用ng-xxx

6.vue中数据放在data对象里面,angular数据绑定在$scope上面

7.vue有组件化概念,angular中没有

vue-react

1.react和vue都是用虚拟DOM Virtual DOM

2.React和Vue都提供了响应式(Reactive)和组件化(Componsable)的视图组件

3.React和vue都将注意力集中保持在核心库,伴随于此,有配套的路由和负责处理全局状态管理的库

4.React使用JSX渲染页面,Vue使用简单的模板

5.Vue比react运行更快

2015-12-04 15:59:45 zhangxtn 阅读数 0

【编者按】Kumar Sanket为Toptal公司的全栈Web开发者/工程师,他在一篇文章《Why I Ditched Angular for React》中对Angular和React进行了对比,他表示Angular在快速开发大型Web项目上很受推崇,但其也存在的种种缺陷,如过于依赖DOM操作,双向数据绑定带来性能问题等。而React作为由Facebook和Instagramin领导的新开源项目,为JavaScript应用开发者提供了新的开发方式,同时具有速度快、跨浏览器兼容、模块化等优点,也是这些优点,让Kumar Sanket选择了React。下面为该文章的译文。


几年前,我的代码因充满了jQuery选择器和回调函数而十分凌乱,后来AngularJS的出现很好地解决了这个问题。

使用AngularJS开发的项目拥有极好的可维护性,AngularJS拥有一系列简单易用的功能,有利于快速开发大型的Web项目。

初识时,AngularJs的双向数据绑定和所有的数据源都放在Model中的设计理念让我惊叹,在实际的开发中,有效地减少了应用程序中的数据冗余。

随着应用频率越来越多, AngularJs的一些缺陷也渐渐体现,在使用过程中的不如意让我决定寻找一个它的替代品。

以下就是我对Angular的一些不满。

基于DOM的程序执行。在Angular的执行过程中过于依赖DOM操作。在Angular应用的执行时,会首先扫描所有的DOM,再通过指令进行编译,这让不利于开发者进行调试也很难判断程序执行顺序。

双向数据绑定是一把双刃剑。随着组件增加,项目越来越复杂,双向数据绑定带来性能问题。

双向数据绑定是如何影响性能的?在JavaScript(ES5)中,并没有实现当变量或对象改变时发出通知的功能,Angular的实现方法被叫做“Dirty-checking(脏检查机制)”,通过跟踪数据的改变再动态更新用户界面(UI)。

在Angular的作用域中任何操作的执行都会引发Dirty-checking,随着绑定数量的增加性能就会越低。

双向数据绑定的另一个问题是,如果页面上有许多拥有动态数据的组件,这意味着也会有很多的数据来源,如果管理不好会让人感觉混乱不堪。但公平地说,这是开发人员的方式方法问题而不是Angular本身的缺陷。

Angular自成一体。Angular的任何操作会引起digest cycle对注册过的监听器的遍历,以实现组件动态地同步数据。这会和其它的依赖产生兼容性问题。

如果你使用的其它JavaScript库也需要改变数据就必须用Angular的$apply函数去封装。

或者如果它是一个工具库,你就需要把它转换成一个服务。似乎其它JavaScript库都必须经过改动才能和Angular进行交互操作。

依赖注入。JavaScript目前没有自己的包管理器和依赖解析器,AMD、UMD和CommonJs很好的解决了这个问题。不幸的是Angular并没有很好地利用这些规范,Angular甚至实现了一个自己的依赖注入(DI)。但是公平地说Angular使用RequireJS依赖项注入的非官方实现已经有了。

学习进阶难。使用Angular需要学习大量的概念,包括但不限于:

  • 模块
  • 控制器
  • 指令
  • 作用域
  • 模板
  • 链式函数
  • 过滤器
  • 依赖注入

用好Angular是非常难的,不是一朝一夕的事情。

以上的原因导致我改用React。

React又哪里牛了?

React是一个由Facebook和Instagramin领导的新开源项目,用于构建用户界面,为JavaScript应用开发者提供了新的开发方式。 

事先声明:React并不是AngularJs那样的一个应用程序开发框架。把他们作为同一个类型来比较是不公平的。

2013年五月,当JSConf EU大会上被推出时,它“单向数据流”和“虚拟DOM”等概念把观众震撼了。

React是用于构建用户界面的。引用官方主页上的说法:“对开发者来说,React就是MVC中的V”。你可以自由地写独立的组件,在这一点上或多或少优于Angular的指令集。

React省思了目前Web开发中遇到的一些问题并作出了最佳的实践。

比如,它鼓励的单向数据流,并坚信组件是被数据驱动的状态机。

然而大部分其它类似的框架都是直接操作DOM,React并不喜欢这种方式且尽量避免这种方式。

React恰如其分地提供了定义一个UI组件所需的最基本的API。它遵循UNIX的信条:做一件事,做到极致。

想知道更详细的关于Angular和React的比较,可以阅读Pete Hunt(Facebook/Instagram职员)写的Angular和React的比较来获取更多细节。

为什么我开始使用React?

以下是我喜欢React的一些地方。

React速度很快

与其它框架相比,React采取了一种特立独行的操作DOM的方式。

它并不直接对DOM进行操作。

它引入了一个叫做虚拟DOM的概念,安插在JavaScript逻辑和实际的DOM之间。

这一概念提高了Web性能。在UI渲染过程中,React通过在虚拟DOM中的微操作来实对现实际DOM的局部更新。

跨浏览器兼容

虚拟DOM帮助我们解决了跨浏览器问题,它为我们提供了标准化的API,甚至在IE8中都是没问题的。

模块化

为你程序编写独立的模块化UI组件,这样当某个或某些组件出现问题是,可以方便地进行隔离。

每个组件都可以进行独立的开发和测试,并且它们可以引入其它组件。这等同于提高了代码的可维护性。

单向数据流让事情一目了然

Flux是一个用于在JavaScript应用中创建单向数据层的架构,它随着React视图库的开发而被Facebook概念化。它只是一个概念,而非特定工具的实现。它可以被其它框架吸纳。例如,Alex Rattray有一个很好的Flux实例,在React中使用了Backbone的集合和模型。

纯粹的JavaScript

现代Web应用程序与传统的Web应用有着不同的工作方式。

例如,视图层的更新需要通过用户交互而不需要请求服务器。因此视图和控制器非常依赖彼此。

许多框架使用Handlebars或Mustache等模板引擎来处理视图层。但React相信视图和控制器应该相互依存在一起而不是使用第三方模板引擎,而且,最重要的是,它是纯粹的JavaScript程序。

同构的JavaScript

单页面JS应用程序的最大缺陷在于对搜索引擎的索引有很大限制。React对此有了解决方案。

React可以在服务器上预渲染应用再发送到客户端。它可以从预渲染的静态内容中恢复一样的记录到动态应用程序中。

因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行,预渲染你的应用有助于搜索引擎优化。

React与其它框架/库兼容性好

比如使用RequireJS来加载和打包,而Browserify和Webpack适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。

不幸的是,目前的JavaScript版本并没有提供一个打包和加载的模块。(在未来的ES6版本上将使用System.import来解决这个问题)。

幸运的是,我们有RequireJS和Webpack这些漂亮整洁的替代品。React是由Browserify构建的,如果你想操作图像资源或者编译LessCoffeeScript,Webpack或许是一个更好的选择。

我需要另一个开发框架来配合React吗?

你可以使用React来构建用户界面,但是你仍然需要进行AJAX调用,应用数据过滤以及其它Angular已经实现的功能。

如果我们还需要另一个额外的JavaScript开发框架,为什么不使用Angular?

框架由一系列模块和规则组成。如果我们不需要它的一些模块,甚至想将某些模块替换,我该怎么做?

其中一种实现模块化且能更好地进行依赖管理的方法是通过包管理器。

但是,在Angular中怎么进行包管理呢?这还得取决于你,但是得记住,Angular是自成一体的。你很可能需要让第三方包去适配Angular。

另一方面,React仅仅只是JavaScript而已。任何用JavaScript写的的包都不需要用React去封装。

对我而言,使用npm和Bower这样的包管理器更好。我们可以选择自己的组件和工具集。需要明确的是:这比使用像Angular这样的综合性开发框架更复杂。

就这方面而言,React的好处是鼓励使用npm,npm已经拥有了很多现成的包。你可以从完整的初学者工具包中选择一个开始构建React应用的包。

转向使用React也不是一帆风顺的!

由于Angular是一个应用开发框架,它带来了很多便利。我放弃了一些好的功能比如:封装好的AJAX用于$http服务,$q用于应答服务,ng-show,ng-hide,ng-class和ng-if作为模板的控制语句——所有这一切都让人惊奇。

React不是一个应用开发框架,所以你需要考虑如何处理构建一个应用程序的其它方面。例如,我正在参与一个叫做react-utils的开源项目,它可以帮助React进行更简单便捷的开发。

就目前而言,社区也在积极的贡献一些类似的组件来填补这一方面的空白。React Components就是这样一个非官方的网站,你可以在这儿找到类似的开源组件。

React的信条不鼓励使用双向绑定,这也给处理表单数据和编辑表格数据带来了很多痛苦。

无论如何,当你开始理解Flux数据流和存储,事情就变得简单、清晰和简单。

React是新生的。这需要一些时间让它周边社区发展。在另一方面,Angular已经非常流行了,且有大量的可用扩展(例如 AngularUI和Restangular)。

虽然React的社区刚起步,但是发展得非常迅速。像React Bootstrap这样的扩展就是一个很好的证明。我们早晚会拥有更多更丰富的组件,这只是一个时间问题。

总结

如果你喜欢Angular的方式,在一开始你可能会不喜欢React。主要是因为它是单向数据流且缺乏开发应用程序的一些功能。最终很多事情还是需要自己来考虑。

然而当你开始习惯了Flux的开发模式和React的设计理念,我相信你会看到它的美。

Facebook和Instagram都在使用React(因为他们在领导这个项目)。

GitHub最新的源码编辑器Atom就是用React构建的。

雅虎邮箱也正在使用React重构。

React已经被大量的应用程序和科技公司所关注。(责编:陈秋歌)

原文来自:Six Revisions

2020-02-28 21:44:33 xinghuowuzhao 阅读数 690

 

1、angular,angularJS,React,Vue对比

 

  React AngularJS Angular Vue
时间 13年 09年 16年 尤雨溪于 2014 年创建了这个框架
介绍 用于构建用户界面的 JavaScript 库 由Misko Hevery 等人创建,后为Google所收购。 Angular 是一个应用设计框架与开发平台,用于创建高效、复杂、精致的单页面应用。 渐进式 JavaScript 框架
官网 https://reactjs.org/ https://angularjs.org/ https://angular.cn/ https://cn.vuejs.org/
特点

一切都是JavaScript;

依赖Virtual DOM;

React Native 支持跨多平台开发;

MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入 一套框架,多种平台 移动端 & 桌面端

组件间强制单向数据流;

DOM模板;

体积小;

基于 HTML 的模板使得将已有的应用逐步迁移到 Vue 更为容易;

路由库和状态管理库都是由官方维护支持且与核心库同步更新的;

所有的数据都是独立触发的。

优势

更丰富的生态系统;

更适合大型应用和更好的可测试性Web端和移动端原生APP通吃更大的生态系统

比较适合做管理系统;

横跨所有平台;

静态类型检查在大规模的应用中非常有用

渐进式构建能力;

模板和渲染函数的弹性选择简单的语法和项目配置更快的渲染速度和更小的体积

劣势

所有的组件的渲染功能都依靠 JSX;

路由库和状态管理由社区管理;

不适合单独做一个完整的框架

性能较差(脏检查);

体积最大;

不支持低端浏览器;

首次加载慢;

体积较大;

学习曲线是非常陡峭;

不支持低端浏览器;

只聚焦视图层;

适用场景

动态创建和交互式 UI 场景较多的场景;

灵活性更高;

原生体验要求更高的场景;

中型管理系统; 适用在复杂、重大项目中。它有自己的一套规则,写出来的项目结构比较清晰,便于大型项目的维护迭代

轻量级;

快速上手:语法简单,配置简单;

一次编写,支持多种小程序发布;

配套

Mobx-状态管理

Flux

Redux

JQuery

 

VueX 状态管理

Vue-Router 路由

Vue-Cli 脚手架

Vue-Loader

对知识体

系的要求

HTML

JSX(XML 语法)

ES2015

Webpack/Gulp

HTML

CSS

JavaScript

HTML

TypeScript

Webpack/Gulp

HTML

CSS

JavaScript

Webpack/Gulp

 

2、Vue.js与AngularJS的对比

相同点:

1)都支持指令:内置指令和自定义指令。

2)都支持过滤器:内置过滤器和自定义过滤器。

3)都支持双向数据绑定。

4)都不支持低端浏览器。

不同点:

1)AngularJS的学习成本高,比如增加了Dependency Injection特性,而Vue.js本身提供的API都比较简单、直观。

2)在性能上,AngularJS依赖对数据做脏检查,所以Watcher越多越慢。

3)Vue.js使用基于依赖追踪的观察并且使用异步队列更新。所有的数据都是独立触发的。对于庞大的应用来说,这个优化差异还是比较明显的。

 

3、Vue.js与React的区别

相同点:

1)React采用特殊的JSX语法,Vue.js在组件开发中也推崇编写.vue特殊文件格式,对文件内容都有一些约定,两者都需要编译后使用。

2)中心思想相同:一切都是组件,组件实例之间可以嵌套。

3)都提供合理的钩子函数,可以让开发者定制化地去处理需求。

4)都不内置列数AJAX,Route等功能到核心包,而是以插件的方式加载。

5)在组件开发中都支持mixins的特性。

不同点:

1)React依赖Virtual DOM,而Vue.js使用的是DOM模板。React采用的Virtual DOM会对渲染出来的结果做脏检查。

2)Vue.js在模板中提供了指令、过滤器等,可以非常方便,快捷地操作DOM。

 

4、目前一些前端框架的首次渲染时间

(首次渲染越快,到可以进行操作的时间越短,应用的用户体验就越好。)

详见 Lighthouse 评分指南(https://url.leanapp.cn/3JE8dVF)

 

640?wx_fmt=png

 

 

5、技术文档汇总

腾讯:https://cloud.tencent.com/

 

6、参考资料

Vue和其他技术框架的对比:https://cn.vuejs.org/v2/guide/comparison.html

前端测评:https://blog.csdn.net/EAPxUO/article/details/89488671

web前端技术框架选型参考:https://blog.csdn.net/hbwang_716/article/details/81776208

Vue和React对比:https://segmentfault.com/a/1190000020722329

React和Vue应该如何选择:https://www.jianshu.com/p/329c030e379c