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

2020-06-16 06:34:42易采站长站整理

这意味着,由于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的渲染功能有一些优势:

你可以使用的完整的编程语言JavaScript来构建你的视图页面。
工具对JSX的支持相比于现有可用的其他Vue模板还是比较先进的(比如,linting、类型检查、编辑器的自动完成)。
在 Vue 中,由于有时需要用那些功能,我们也提供了渲染功能 并且 支持JSX 。然而,对于大多数组件来说,渲染功能是不推荐使用了。

在这方面,我们提供的是个更简单的模板:


<template>
<div class="list-container">
<ul v-if="items.length">
<li v-for="item in items">
{{ item.name }}
</li>
</ul>
<p v-else>No items found.</p>
</div>
</template>

优势如下:

在写模板的过程中,样式风格已确定和更少地涉及业务逻辑。

一个模板总是被声明的。

模板中任何 HTML 都是有效的。