在 2016 年,React 巩固了它作为 JavaScript web 框架最多人使用的地位。今年,它的 Web 端和移动端框架库都迅速增长,并明显领先于竞争对手。
但是 2016 年,vue 的表现同样令人印象深刻的一年。其 2.0 版的发布对 JavaScript 社区来说,给大家留下了深刻的印象,证明就是它今年获得了 25000 个额外的 GitHub****Stars。
React 和 Vue 无疑是相似的:都是轻量级的组件库,用于构建用户界面的只集中在视图层。两者都可以在一个简单的项目中使用,或者使用前沿的工具扩展到一个复杂的应用程序。
因此,很多 Web 开发人员都在考虑应该使用哪一种。一个明显优于另一个吗?他们有那些特殊的优点和缺点要注意吗?或者它们基本上是一样的吗?
两个框架,两个倡导者。
在这篇文章中,我想用透彻而公平的比较来回答这些问题。唯一的问题是:我是一个毫无顾忌的 Vue 粉丝,可能会有失偏颇。今年我在我的项目中大量的使用 Vue,唱着它的赞歌在 Medium 甚至还发布了 Udemy 课程。
为了证明我不是十分的偏颇,我找来了我的朋友 Alexis Mangin 他是一个很牛的的 JavaScript 开发者和一个 React 粉丝。他同样沉浸在 React 中,经常在 Web 和移动项目中使用它。
一天,亚历克西斯问我:"你为什么用 Vue,没有用 React?" 因为我不了解 React,所以我不能给出一个好的答案。所以我把这个想法告诉他,有一天我们俩坐在笔记本电脑前,互相展示我们所选择框架能够开发的东西。
安东尼(左)和亚历克西斯(右)在泰国清迈的 bull and bear 咖啡馆
经过双方的大量讨论和互相学习,以下六点是我们的主要发现:
在一个 html 文件中将 Vue 标记为一个默认的设置。类似 Angular,小括号用于数据绑定表达式,而指令(特殊 HTML 属性)用于向模板添加功能。
以下演示了一个简单的 Vue 应用。它打印一条消息,并有一个动态反转字符串消息的按钮:
- // HTML
- < div id = "app" >
- <p > {
- {
- message
- }
- } < /p>
- <button v-on:click="reverseMessage">Reverse Message</button >
- </div>
- / / JS
- new Vue({
- el: '#app',
- data: {
- message: 'Hello vue.js!
- },
- methods: {
- reverseMessage: function () {
- this.message = this.message.split('').reverse().join('');
- }
- }
- });'
相反,React 应用使用模板要求开发商在 JavaScript 中创建 DOM,通常需要借助 JSX。下面是 React 实现相同的简单应用程序:
- // HTML
- < div id = "app" > </div>
- / / JS(pre - transpilation)
- 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'));/
对于熟悉标准 Web 开发范例的新开发人员来说,模板更容易理解。但即使是一些有经验的开发人员也更喜欢使用它们,因为模板可以更好地将布局与功能分开,并提供使用像 Pug 这样的预处理器的选项。
但是模板的代价是要学习所有扩展的 HTML 语法,而渲染函数只需要标准 HTML 和 JavaScript 的知识。渲染功能对于调试和测试的来讲更加方便。
在这一点上,你也不能去怪 Vue,它在 2 版本中,介绍了如何使用模板的选项或渲染功能。
一个简单的 Vue 项目可直接运行而无需借助浏览器。这使得 Vue 在项目中更容易使用 jQuery 的方法。
而 React 也可以在技术上实现它,但是典型的 React 代码更倾向依赖 JSX 和 ES6 的功能类和静态数组的方法。
Vue 更深入的设计了如何简单运行。让我们比较一下这两个库如何处理应用程序的数据(例如 "状态")。
处于 React 中的状态是不可变的,所以你不能直接改变它。你需要使用 setstate API 方法:
- this.setState({
- message: this.state.message.split('').reverse().join('')
- });
无论当前和以前的状态是怎样的,React 都知道何时和如何在 DOM 渲染,因此不需要改变状态。
相反,数据在 Vue 是实时变化的,相同的数据属性在 Vue 的很容易改变:
- // Note that data properties are available as properties of
- // the Vue instance
- this.message = this.message.split('').reverse().join('');
在你得出这样的结论:Vue 的渲染系统肯定缺乏 React 一样的效率,那让我们看看 Vue 如何管理状态:当你添加一个新的对象的状态,Vue 将通过 getter 和 setter 转换其所有属性。Vue 的响应系统现在跟踪状态的改变,然后会自动重新渲染 DOM 时。
令人印象深刻的是,Vue 改变状态不仅更简洁,其重新渲染相对 React 来说实际上也是更快和更有效的。
Vue 的响应系统虽然也有问题。例如,它不能检测属性添加或删除以及某些数组的更改。这些事件可以工作通过 Vue API 中的 set 方法像 React 似的。
React 和 Vue 当应用程序状态的改变的时候将建立一个虚拟的 DOM 同步实际 DOM。两者都有自己的方法来优化这个过程。
Vue 的核心开发人员提供了一个基准测试,表明 Vue 的渲染系统比 React 更快的,本试验中通过渲染有 10000 个项的列表 100 次,结果比较如下。
从实用的角度来看,这种基准仅与边缘情况有关。大多数应用程序不需要进行这种常规地操作,因此一般不应被视为比较的一个重要点。
虽然,页面大小是与所有项目都相关,所以 Vue 再次占了上风,Vue 库目前的版本只 25.6kb。
得到相似的功能,你需要使用 React 的 DOM(37.4kb)和 React 的插件库(11.4kb),总计 48.8kb 。是 Vue 的几乎一倍。公平地说,你会得到一个更大的 API 库,但是你不会得到双倍的功能。
一个简单的应用程序通过 Vue 和 React 的比较,如本文开头,最初开发商可能偏向青睐 Vue。这是因为基于模板的应用程序一开始就更容易理解,并且更快地启动和运行。
但这些最初的好处也引入了一些技术上的问题,从而减缓了应用程序开发规模的扩大。模板很容易忽略运行时的错误,也很难测试,并且不容易重构或分解。
相比之下,JavaScript 可以将模板组织成具有良好分解和 DRY 代码的组件,这些组件具有更高的可重用性和可测试性。
Vue 也有一个组件系统和渲染功能。但是,React 的渲染系统更具有可配置性,并且具有类似于浅渲染的特性,结合 React 测试实用程序,允许测试性更强且代码易于维护。
同时,React 不可变的应用程序数据可能不是那么简洁,但当透明性和可测试性变得至关重要时,它将是在更大的应用程序中一个闪光点。
React 也是使用 JavaScript 构建 App 应用程序的库。这是 react.js 相同,只是不使用 Web 组件,它使用 App 组件。如果你已经学会 react.js,你会很容易能够用 React 开发,反之亦然。
- // JS
- import React, { Component } from 'react';
- import { AppRegistry, Text, View } from 'react-native';
- class HelloWorld extends Component {
- render() {
- return (
- <View>
- <Text>Hello, React Native!</Text>
- </View>
- );
- }
- }
- AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
重要的是,开发人员可以在 Web 或移动端上构建应用程序,而不需要不同的知识和工具集。如果你打算为 Web 和手机开发,学习 React 会给你带来巨大的冲击。
阿里巴巴的 Weex 是另一个跨平台的 UI 项目。目前它被认为灵感来自 Vue 并大量使用相同的语法,并计划充分整合 Vue。然而,这种整合的时间和细节还不清楚。
由于 Vue 将 HTML 模板作为其设计的核心部分,没有将自定义渲染作为特征,在其目前的版本 vue.js 很难看到移动端的原生开发能像 React.js 和 React Native 一样结合的如此紧密。
毫无疑问,React 是目前比较流行的,NPM 下载 React
2.5m / 月,Vue 只有约 225k / 月。
受欢迎不仅仅是一种简单的好处。这意味着有更多的文章、教程和 Stack Overflow 帮助解答。这意味着有更多的工具和附加组件可以在一个项目中发挥作用,并帮助开发人员自己开发所有的东西。
这两个库都是开源的,但是 React 源于 facebook,受益于这种赞助。React 的开发人员和公司可以继续维护。
与此相反,Vue 是由一个单一的开发者,Evan You 创造的,而他是目前 Vue 唯一的全职人员。Vue 获得一些公司赞助但没有 facebook 或 google 那样的规模。
在 Vue 团队的信用方面,它的规模和收入来源是一个不利因素。Vue 发布周期和更令人印象深刻的是,Vue 只有 54 个 open
issues ,与 React 在 GitHub 上的 530 相比,明显 React 要多得多。他们的 close issues 是 3456 比 3447。
如果你已经对他们中的一个或另一个十分满意,就没有必要改变。
总的来说,根据我们的研究结果,Vue 的优势在于:
React 的强项是:
然而,无论 React 和 Vue 都是优秀的 UI 库他们的相似性大于差异性。他们的很大部分特点都是一直的:
如果你认为我们错过了什么,我们希望在评论中听到。快乐的开发吧!
来自汇智网( www.hubwiz.com ,有很多性价比极高的 vue.js 内容哦)的小智翻译。
来源: http://www.jianshu.com/p/2b4b0c305187