React还是Vue：选哪个？

在2016年，React巩固了自己JavaScriptWeb框架之王的地位。在那一年，它的Web和移动原生库都经历了快速增长，且明显领先于其主要竞争对手Angular。

但2016年对Vue来说也是值得纪念的一年。Vue第二版发布后在JavaScript社区中留下了深刻的印象，这一年中Vue新增的25,000个Github星星也证明了这一点。

毫无疑问，React和Vue的目标市场非常相似：两者都是基于组件的轻量级库，都是用来构建仅关注视图层的用户界面。两者都可以用在简单的项目中，也可以使用顶尖的工具链扩展到复杂的应用程序上。

于是乎，许多Web开发人员都在犹豫到底该用哪个框架。它们之间有明显的差距吗？它们各自有什么独特的利弊需要注意的？还是说它们基本上没什么区别？

两个框架，两位粉丝

在这篇文章中，我想通过全面而公正的对比来回答这些问题。但这里存在一个问题：我是一位狂热的Vue粉丝，根本没法抛弃自己的主观意识做出客观的决定。我在自己的众多项目中大量使用Vue，甚至发布了一套在线课程，名为UltimateVue.js开发人员课程。

为了抵消我的偏见，我邀请了我的朋友Alexis Mangin，他既是一位出色的JavaScript开发者，也是React的忠实粉丝。他也非常沉迷React，经常在Web和移动项目中使用它。

有一天Alexis问我：“你为什么这么喜欢Vue，而不是React？”由于我不太了解React，所以无法给出一个很好的答案。因此我跟他提了一个想法，就是说我们找一天带着自己的笔记本坐下来聊聊，互相向对方展示我们中意的库有哪些优点。

Anthony（左）和Alexis（右）在泰国清迈的"公牛与熊"咖啡馆对比React和Vue

经过双方的大量讨论和学习，我们主要总结出了以下六点内容。

Vue：使用模板构建应用

将标记放入HTML文件中是Vue应用的默认选项。与Angular相似，花括号用于数据绑定表达式，而指令（特殊的HTML属性）用来向模板添加功能。下面演示了一个简单的Vue应用。它打出一条消息，并有一个可动态反转这条消息的按钮：

<div id="app">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('');
    }
  }
});

相反，React应用会避开模板，并要求开发人员使用JavaScript（通常在JSX的帮助下）创建DOM。以下是使用React实现的同一个简单应用：

<divid="app"></div>

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项目可以无需转译（transpilation）就直接运行在浏览器里。因此在项目中使用Vue就能像使用jQuery一样容易。

尽管React从技术上来说也能做到这一点，但是典型的React代码会相当依赖JSX和ES6功能（例如类和非可变数组方法）。但是Vue的简单性是体现在其设计的更深层面中的。下面我们对比一下两个库是怎样处理应用程序数据的（也就是“状态”）。

React中的状态是不可变的，因此你无法直接更改它。你需要使用setState API方法：

this.setState({ 
    message: this.state.message.split('').reverse().join('') 
});

React会区分当前和先前的状态，从而知道何时以及如何在DOM中重渲染，因此需要不可变状态。 相反，数据在Vue中是会突变的。同样的数据属性在Vue中调整起来就简洁得多：

//Notethatdatapropertiesareavailableaspropertiesof
//theVueinstance
this.message=this.message.split('').reverse().join('');

别急着下结论说Vue的渲染系统效率肯定不如React的，我们先来研究一下Vue中的状态管理机制：当你向状态添加一个新对象时，Vue将遍历其所有属性并将它们转换为getter和setter。Vue的反应系统现在可以跟踪状态，并在DOM突变时会自动重渲染。 令人印象深刻的是，在Vue中更改状态不仅更简洁，而且其重渲染系统实际上比React更快、更高效。

不过Vue的反应系统确实有一些不足。比如说，它无法检测到属性的添加或删除以及某些数组更改。这些情况可以通过Vue API中类似React的set方法来解决。

Vue：如果你希望应用程序小而快

当应用状态更改时，React和Vue都会构建一个虚拟DOM并同步真实DOM。两者都有优化这一过程的手段。Vue核心开发人员提供了一个基准测试，显示Vue的渲染系统比React的更快。这个测试会对10,000个项目的列表渲染100次。对比成绩如下表所示。

在vuejs.org上发布的基准测试成绩

从务实的角度来看，这种基准测试结果只能反映一些极端情况。大多数应用不需要频繁执行此类操作，因此一般来说不应该把它当作是对比的重点

但是页面大小是所有项目都要考虑的事情，而Vue再次占据上风。Vue库的当前版本压缩后只有25.6KB。

为了在React中获得类似的功能，你需要ReactDOM（37.4KB）和React加扩展库（11.4KB），总计48.8KB，几乎是Vue的两倍。公平地说，React的API更大，但功能却没有两倍那么多。

React：大型应用必备

对比Vue和React时，拿一个简单应用的实现做比较（例如本文开头的应用），可能会让开发人员先入为主偏向Vue。这是因为基于模板的应用乍看之下更容易理解，并且上手和运行起来也更快。

但这些看起来很棒的起步方式会引入一些技术债，进而在应用规模变大时拖累开发工作。模板容易出现很难发现的运行时错误，难以测试，并且不容易重构或解耦。

相比之下，JavaScript制作的模板可以组织成解耦良好和使用DRY代码的组件，这些代码更容易重用和测试。

Vue也有组件系统和渲染函数，但是React的渲染系统配置起来更自由，并且有浅层渲染等功能，可以结合React的测试工具来写出更易测试和维护的代码。

虽然React的不可变应用程序数据可能没那么简洁，但是当较大的应用程序更看重透明性和可测试性时，它就会大放异彩。

React：同时适用于Web和原生应用的库

ReactNative是一个使用JavaScript构建原生移动应用程序的库。它与React.js相同，只不过使用的是原生而非Web组件。如果你已经学会了React.js，那么就很容易入门ReactNative，反之亦然。

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那样紧密的原生搭档。

React：最大的生态系统

毫无疑问，React是目前最受欢迎的库，每月NPM下载约250万次，而Vue每月约22.5万。

人气高的好处不仅仅那么简单。这同时意味着会有更多文章、教程和StackOverflow答案可提供帮助。这还意味着项目有更多工具和插件可供选择，开发人员用不着自己构建所有内容。

这两个库都是开源的，但是React诞生于Facebook，并从中受益。选择React的开发人员和公司可以很放心，知道这个项目会长久维护下去。

相比之下，Vue是由Evan You一位开发人员创建的，他目前是Vue的唯一全职维护者。Vue有一些公司赞助，但规模不及Facebook或谷歌。

Vue团队值得称道的是，它的小规模和独立性尚未成为一种劣势。Vue有固定的发布周期，而且更令人印象深刻的是，Vue在Github上只有54个未解决问题，已解决问题多达3456个；而React有530个未解决问题，数量多得多，已解决问题是3447个。

如果你有所倾心则不必更换

回顾一下我们的讨论结果，Vue的优势有：

• 灵活选择模板或渲染函数。
• 语法和项目设置简单。
• 渲染速度更快，尺寸更小。

React的优势：

• 更适合大应用，更健壮，更易测试。
• Web和原生应用。
• 更大的生态系统，支持和工具更多。

但React和Vue都是出色的UI库，并且它们的相似之处多于差异。它们的大多数最佳特性都是类似的：

• 使用虚拟DOM进行快速渲染
• 轻巧。
• 反应性组件。
• 服务端渲染。
• 容易与路由器、打包器和状态管理集成。
• 很好的社区和支持。

如果你认为我们错过了某些内容，希望在评论里提出来。编程愉快！

作者介绍： Anthony Gore，JavaScript开发人员和在线课程讲师。博客名为Vue.jsDevelopers，并且是UltimateVue.js开发课程的作者。

Alexis Mangin，Alexis凭借他在Web开发方面的卓越知识帮助作者撰写了这篇文章。在Medium上撰写许多关于React的精彩教程。

延伸阅读：

https://dzone.com/articles/react-or-vue-which-javascript-ui-library-should-yo