React
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次，和包含的最好的结果：
更新性能
在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>
)
}
</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>
</div>
优势如下：
在写模板的过程中，样式风格已确定和更少地涉及业务逻辑。
一个模板总是被声明的。
模板中任何 HTML 都是有效的。
阅读起来更像英语（比如，for each item in items）。
高级版本的 JavaScript 增加可读性。
这样，不仅开发人员更容易编写代码，设计人员和开发人员也可以更容易的分析代码和贡献代码。
还没有结束。Vue拥抱HTML，而不是用JavaScript重塑它。在模板内，Vue也允许你用预处理器比如Pub（原名 Jade） 。
React 生态也有一个项目允许你写模板，但是有一些缺点：
功能远没有 Vue 模板系统的丰富。
需要从组件文件中分离出HTML代码。
这是个第三方库，而非官方支持，可能未来核心库更新就不再支持。
CSS的组件作用域
除非你把组件分布在多个文件上(例如 CSS Modules),要不作用域内的CSS就会暴警告。非常简单的CSS还可以工作，但是稍微复杂点的，比如悬停状态、媒体查询、伪类选择符要么会被修改要么就不能用。
Vue让你可以完全访问 单文件组件 。
<style scoped>
@media (min-width: 250px) {
.list-container:hover {
background: orange;
}
}
</style>
</div>
这个可选 scoped 属性自动添加一个唯一的属性（比如 data-v-1 ）为组件内CSS指定作用范围，编译的时候 .list-container:hover 会被编译成类似.list-container[data-v-1]:hover。
最后，你可以选择自己偏爱的CSS预处理器编写CSS。这可以让你围绕设计为中心展开工作，而不是引入库来增加你应用的容量和复杂度。
规模
扩大
Vue和React都提供了强大的路由来应对对于大型应用。React社区在状态管理方面非常有创新精神（比如Flux、Redux），而这些状态管理模式甚至 Redux本身 也是非常容易能够集成在Vue应用中的。实际上，Vue更进一步地采用了这种模式（Vuex），把Vuex集成进Vue能带来更好的开发体验。
两者另一个重要差异是，Vue伴随的路由库和状态管理库都是由官方支持维护且和核心库同步更新的。React 生态更成熟，选择是把这些问题交给社区维护。
最后，Vue 提供了一个Vue-cli 脚手架，能让你非常容易地构建项目，可以包含 Webpack, Browserify, 或者 no build system。React在这方面也提供了create-react-app，但是现在还有一些局限性：
它不允许在项目生成时进行任何配置，而Vue运行Yeoman-like定制。
它只提供一个构建单页面应用的单一模板，而Vue 提供各种用途的多种模板。
它不能用用户自建的模板构建项目，而这对企业环境预先建立协议是很有用。
注意这些限制是故意设计的，这有它的优势。例如，如果你的项目需求非常简单，你就不需要自定义生成过程。你能把它作为一个依赖来更新。如果阅读更多关于不同的设计理念。
缩小
React学习曲线陡峭，在你开始学 React 前，你需要知道 JSX 和 ES2015，因为许多示例用的是这些语法。你需要学习构建系统，虽然你可以在技术上可以用 Babel Standalone 来编译代码，但是不推荐用于生产。
Vue样扩大后就像React，缩小后就像 Jquery。你需要做的就是把如下标签放到页面就行：
<script src="https://unpkg.com/vue/dist/vue.js"></script></div>
然后就可编写Vue代码并应用到生