Vue.js 2.0 和 React、Augular等其他前端框架大比拼

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

使用 Virtual DOM

提供了响应式(Reactive)和组件化(Composable)的视图组件。

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

相似的作用域,我们会用更多的时间来讲这一块的比较。不仅我们要保持技术的准确性,同时兼顾平衡。我们指出React比Vue更好的地方,例如,他们的生态系统和丰富的自定义渲染器。

React社区在这里非常积极地帮助我们实现这一平衡,特别感谢来自 React 团队的 Dan Abramov 。他非常慷慨的花费时间来贡献专业知识,来帮我们完善这个文件,直到我们都满意。

这么说,就是希望你能对这两个库的比较的公平性感到放心。

性能简介

到目前为止,在现实的测试中,Vue 是优于 React 的(通常至少快20%-50%,尽管在某些情况下还要更快)。我们可以提供一个到这个参照项目的链接,但是坦率的说,所有的参照在某些方面是有缺陷的,很少有像你所写的一个真实应用。那么,让我们详细了解下吧。

渲染性能

在渲染用户界面的时候,DOM的操作是最昂贵,不幸的是没有库可以让这些原始操作变得更快。
我们能做的最好的就是:

尽量减少DOM操作。Vue 和 React 都使用虚拟DOM来实现,并且两者工作一样好。
尽量减少除DOM操作以外的其他操作。这是 Vue 和 React的一个不同的地方。
假如说,在React中,渲染一个元素的额外开销是1,而平均渲染一个组件的开销是2。在Vue中,一个元素的开销更像0.1,但是平均组件的开销将是4,这是由于一些系统的设置。

这意味着什么呢,在大多数的应用中,需要渲染的元素比组件的数量是更多的,所以Vue的性能表现将会远优于React。然而,在极端情况下,比如每个组件渲染一个元素,Vue 将通常会较慢。

Vue 和 React 也提供功能性组件,这些组件都是没有声明,没有实例化,因此需要更少的开销。当这些都用于性能的关键位置,Vue会更快。为了证明这点,我们建立一个简单的参照项目,它只是渲染 10,000 个列表项 100次。我们鼓励你自己去试一下,实际上,由于浏览器和硬件的原因,结果会有所不同,由于 JavaScript 引擎的不同,结果也会有很大不同。

如果你懒得去做,下面的数字数字从一个运行在 Chrome 52 在一个 2014年产的 MacBook Air上。为了避免偶然性,每个参照项目都分开运行20次,和包含的最好的结果:

Vue.js 2.0 和 React、Augular等其他前端框架大比拼

更新性能

在React中,你需要在每个地方去实现 shouldComponentUpdate ,并且用immutable数据结构才能实现完全完全优化的 re-renders 。在 Vue 中,组件的依赖被自动追踪,所以当这些依赖项变动时,它才会更新。在长列表中,有时候需要进一步优化的话,只需要在每项上添加 key 属性。

这意味着,由于Vue内改进过的渲染性能,更新未经优化的Vue回避未经优化的React要快的多。甚至全面优化过的React通常也会慢于未加处理的Vue。

开发中

显然,在生产中的性能是最重要的,并且也是到目前为止我们所讨论的。开发过程中的表现也是很重要的。好消息是用 Vue 和 React 开发大多数应用的速度都是足够快的。

然而,加入你要开发一个对性能要求比较高的数据可视化或者动画的应用时,这将会很有用。在开发中, Vue 每秒最高处理10帧,而 React 每秒最高处理不到1帧。

这是由于 React 有大量的检查机制,这能让它提供许多有用的警告和错误提示信息。我们同意那些很重要的,但在我们实现这些检查时候,也更加密切地关注着性能。

HTML & CSS

在React中,所有的都是 JavaScript,听起来十分简单和优雅。不幸的事实是,JavaScript 内的 HTML 和 CSS 会引起很多痛苦。在 Vue 中我们采用的 Web 技术并在其上面扩展。接下来将通过一些实例向你展示这所意味的是什么。

JSX vs Templates

在 React 中,所有的组件的渲染功能使用的都是JSX。JSX 是使用 XML 语法编写 Javascript 的一种语法糖。这有一个通过React社区审核过的例子:

render () { let { items } = this.props let children if ( items.length > 0 ) { children = ( <ul> {items.map( item => <li key={item.id}>{item.name}</li> )} </ul> ) } else { children = <p>No items found.</p> } return ( <div className = 'list-container'> {children} </div> ) }

JSX的渲染功能有一些优势:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzjyzs.html