2000字范文,分享全网优秀范文,学习好帮手!
2000字范文 > React Vue Angular对比

React Vue Angular对比

时间:2024-02-29 05:02:12

相关推荐

React Vue Angular对比

目前,主流前端框架三分天下,主要有React Vue Angular。都有各自的特点,以下简单介绍一下。

1.数据流

数据绑定

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

实现原理

$scope变量中使用脏值检查来实现。像ember.js是基于setter,getter的观测机制,$scope.$watch函数,监视一个变量的变化。函数有三参数,”要观察什么”,”在变化时要发生什么”,以及你要监视的是一个变量还是一个对象。使用ng-model时,你可以使用双向数据绑定。使用$scope.$watch(视图到模型)以及$scope.$apply(模型到视图),还有$scope.$digest调用$scope.$watch时只为它传递了一个参数,无论作用域中的什么东西发生了变化,这个函数都会被调用。在ng-model中,这个函数被用来检查模型和视图有没有同步,如果没有同步,它将会使用新值来更新模型数据。

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

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

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

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

脏检测的利弊

和Vue相比(劣):

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

React-单向数据流

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

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

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

2.视图渲染

Angular

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

3.学习成本

Angular的学习成本较高,Angular 2中,它的开始指南中所用的就有 ES 标准的 JavaScript,18个 NPM 依赖包,4 个文件和超过 3 千多字的介绍,这一切都是为了完成个 Hello World,甚至需要掌握TypeScript。Vue与React则是简简单的使用方法,便于刚入门的人员学习。React使用了JSX语法特性,但是React所有的内容都跟嵌套在js中,而在js中维护大量Html与Css是一件很痛苦的事儿。而Vue则无需学习新的语法特性,传统的js语法与html即可使用。Angular入门使用难度稍高。因此从上手容易度来说,Vue是最简单易用的。Angular与Vue都具备数据双向绑定的功能,这在在最常用的取值,以及dom操作中,能够大大减少开发人员的工作量以及出错概率。

语法与用法

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 的单文件组件格式

React的Demo使用

Vue的Demo使用

4.性能优化

在绝大部分常见页面中,他们的表现相差不大。在大小方面,虽然 Angular 2 使代码体积减小了许多,但包含编译器和全部功能的 Vue2(23kb) 相比 Angular 2(50kb) 还是要小的多。而且,用 Angular 2 的 App 的体积缩减是使用了 tree-shaking 移除了那些框架中没有用到的功能,但随着功能引入的不断增多,尺寸会变得越来越大。React一般则需要引入至少两个文件,且体积几乎是Vue两倍。因此对于网络较为珍贵的传输中,Vue更占优势。在运行速度上,Vue与React都采用了虚拟Dom的方式,先进行差异化计算,得出最小的修改dom的节点再进行对真实Dom的操作,性能更高。而Vue与React经过测试,同样Vue更快。在应用的状态(数据)发生变化后,Vue与React都提供了各自的算法进行Dom的同步。Vue的核心开发者提供了一个benchmark测试,测试方法是将含有10000个项目的列表渲染100次,结果如下图

5.生态

React由FaceBook于开源并维护。

Angular诞生与,其后由Google收购维护。

Vue由个人尤雨溪开发维护。从最初的生态来讲,Angular与React有大公司作为支持,且有很多文档与项目,生态圈更为庞大。之后的Vue发展迅猛,其设计目的,是为了简约实用原则,够小够强大,因此受到了更多人的使用。现在的Vue生态圈在迅速发展。而对于他们的选择上,如果有较多重复代码,或者需要使用模板,倾向于能用,简单就好,或者想要更轻快,选择Vue更为合适。如果需要构建大型应用,或者为了在不同平台Android,IOS都使用同一套代码,建议使用React Native。

经过综合对比,从使用的容易度,性能,以及以后的发展,建议使用vue进行开发。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。