当前位置: 首页 > 工具软件 > Riot.js > 使用案例 >

Vue.js,React.js和Angular.js三者的比较

陈增
2023-12-01

了解前端框架之前先了解一下他们框架的模式,前端框架模式可以归结为三类分别为MVC,MVP,MVVM

1.MVC:Model(模型)+View(视图)+controller(控制器),主要是基于分层的目的,让彼此的职责分开。View通过Controller来和Model联系Controller是View和Model的协调者,View和Model不直接联系,基本联系都是单向的。用户User通过控制器Controller来操作模板Model从而达到视图View的变化。

2.MVP:是从MVC模式演变而来的,都是通过Controller/Presenter负责逻辑的处理+Model提供数据+View负责显示。在MVP中,Presenter完全把View和Model进行了分离,主要的程序逻辑在Presenter里实现。并且,Presenter和View是没有直接关联的,是通过定义好的接口进行交互,从而使得在变更View的时候可以保持Presenter不变。MVP模式的框架:Riot.js。

3.MVVM:MVVM是把MVC里的Controller和MVP里的Presenter改成了ViewModel。Model+View+ViewModel。View的变化会自动更新到ViewModel,ViewModel的变化也会自动同步到View上显示。这种自动同步是因为ViewModel中的属性实现了Observer,当属性变更时都能触发对应的操作。MVVM模式的框架有:Vue.js+Angular.js。

 

vue.js

API设计上简单,语法简单,学习成本低

构建方面不包含路由和ajax功能,使用vuex, vue-router

指令(dom)和组件(视图,数据,逻辑)处理清晰

性能好,容易优化

基于依赖追踪的观察系统,并且异步队列更新

独立触发

v-model 实时渲染

适用于:模板和渲染函数的弹性选择

简单的语法及项目搭建

更快的渲染速度和更小的体积

 

react.js

利用jsx创建虚拟dom

是一种在内存中描述dom数状态的数据结构

函数式的方法描述视图

使用虚拟dom作为模板

程序片段

不好控制dom

生命周期

服务端渲染:react的虚拟dom的生成可以在任何支持js的环境生成的,所以可以在node环境生成,直接转为string,然后插入到html文件中输出浏览器便可

适用于:大型应用和更好的可测试性;同时适用于web端和原生app;更大的生态圈

 

优点

React伟大之处就在于,提出了Virtual Dom这种新颖的思路,并且这种思路衍生出了React Native,有可能会统一Web/Native开发。在性能方面,由于运用了Virtual Dom技术,Reactjs只在调用setState的时候会更新dom,而且还是先更新Virtual Dom,然后和实际Dom比较,最后再更新实际Dom。这个过程比起Angularjs的bind方式来说,一是更新dom的次数少,二是更新dom的内容少,速度肯定快

ReactJS更关注UI的组件化,和数据的单向更新,提出了FLUX架构的新概念,现在React可以直接用Js ES6语法了,然后通过webpack编译成浏览器兼容的ES5,开发效率上有些优势.

React Native生成的App不是运行在WebView上,而是系统原生的UI,React通过jsx生成系统原生的UI,iOS和Android的React UI组件还是比较相似的,大量代码可以复用

维护UI的状态,Angular 里面使用的是 $scope,在 React 里面使用的是 this.setState。 而 React 的好处在于,它更简单直观。所有的状态改变都只有唯一一个入口 this.setState(),Angular 就比较复杂。

同构的JavaScript

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

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

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

 

缺点

React是目标是UI组件,通常可以和其它框架组合使用,目前并不适合单独做一个完整的框架。React 即使配上 redux 的组合,也不能称之一个完整的框架,比如你想用Promise化的AJAX?对不起没有,自己找现成的库去。而且第三方组件远远不如Angular多。目前在大的稳定的项目上采用React的,我也就只知道有Yahoo的Email。React本身只是一个V而已,所以如果是大型项目想要一套完整的框架的话,也许还需要引入Redux和route相关的东西。而Angular在这方面提供的东西比React多多了.

 

vue,react 共性:

虚拟dom实现快速渲染

轻量级响应式组件

服务端渲染易于集成路由工具,打包工具及状态管理工具

 

angular.js

优点

AngularJS是一套完整的框架,angular有自带的数据绑定、render渲染、angularUI库,过滤器,directive(模板),服务q(defer),http,inject(依赖注入),factory,provider……,等等一系列工具,基本上只要你在做web开发用过的东西,它都有一个。但是这些东西React自身都没有。

Angularjs的架构清晰,分工明确,扩展性良好,model,view,controller谁在什么时候做什么事情说的很清楚,angular能够让程序员真正专注于业务逻辑,而且因为对html侵入不大,非常易于和designer协作。整个框架充满了DI的思路,耦合性非常低,对象都是被inject的,也就是说每个对象都可以轻易被替换而不影响其他对象。

Angular生产效率高,单向数据流什么的想法非常好,但是写起来太麻烦!我只想变更个很简单的数据还要经过action、dispatcher、reduce、view四步,angular里一行代码就搞定的事情在react里却如此麻烦

 

缺点

性能

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

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

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

Angular 2.0推翻重做使得目前不宜采用此框架

Angular 1.x版本其实是个比较旧的东西了,现在看来有些理念过时了,比如依赖注入、自己独特的模块化,这些东西其实在ES6下已经很好地被解决了。

Angular的2.0几乎是一个推翻重做的框架,估计不会有1.X的upgrade方案。所以如果现在新开始的项目采用Angular的话,会是一个很尴尬的时机。同样,如此大的改动似乎也反面印证了1.X并不是那么好。

学习成本高

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

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

 

 

 

 类似资料: