Vue和React大比拼，你pick谁？
Erosvan 2018-07-19
在6月份，Vue在GitHub上的star数量超过了React，在此之后，各大论坛上对 Vue 和 React 的争论就愈演愈烈，Reddit 上还有开发者专门开了一个 Vue vs React 的话题。所以小编搜集了一些资料，对两大框架进行了全面的对比，看看哪个框架更适合用在新的基础框架中，希望对大家能有一些启发和帮助。
React vs Vue
下面我们将在学习曲线、代码风格、单个文件组件、性能、灵活性、工具、移动开发、社区、成熟度、团队支持等方面对 React 和 Vue 进行比较。
学习曲线
React
React的官方文档算是一份比较完整的的了，虽然为新手们提供了一些入门指南，但是如果是具有一定的前端框架开发经验的前端程序员们可以在几个小时里快速的理解框架的核心原理。但是React的文档虽然完整，但却不如Vue的官方文档那么清晰有序。
React 的官方文档涵盖了必要的一些流程，但仍然缺少一些边缘用例说明。随着项目越变越大，这些边缘用例会变成用户痛点。
React 不算是一个完整的框架，它虽然提供了一些核心，而其他大多数高级的组件是由社区开发的，这无疑给学习曲线增加了一些复杂性。
Vue
Vue 的库可以简单地作为 HTML 页面资源加载，因此，使用 Vue 无需额外的构建。这是一个很低调的库，在不知不觉中为我们节省了很多的时间。
因为 Vue 和 React 有很多通用的概念，开发人员从 React 转到 Vue 会相对容易一些。另外，Vue 的官方文档写得非常详尽，涵盖了开发人员在开发 Vue 应用程序时需要的所有内容。
Vue 的定义比 React 更严格。在 Vue 中，很多问题直接在文档中得到了解答，不需要在其他地方搜索答案。
代码风格
React
React框架中引入了一系列基于函数式编程的概念，简化了 UI 应用程序的开发过程。最值得注意的是：
JSX支持在 JavaScript 代码中编写 HTML，它也是 React 作为函数式编程范式的强大推动力之一，在这个领域内，它是佼佼者。
它的组件生命周期提供了一种直观的方式来连接组件“生命周期”中的特定事件（如创建、更新等）。
Vue
作为一个比 React 和 Angular 都更年轻的框架，Vue 从它们那里借鉴了好的部分，是函数式和面向对象编程的混合体。
默认情况下，Vue 的编码风格在某些方面与 Angular 有点相似，同时又消除了 Angular 的大部分痛点。Vue 将 HTML、JS 和 CSS 分开，就像 Web 开发人员已习惯了多年的传统开发方式，但如果你喜欢，也可以使用 JSX。
Vue 的组件生命周期比 React 更直接和直观。一般来说，Vue 的 API 比 React 更宽泛但更简单。
单文件组件
React
在 React 中，因为使用了 JSX，单文件组件是作为 JavaScript 模块而存在的，因此，React 提供了特定的方式来编写 HTML、CSS 和 JavaScript。
使用 JavaScript 编写所有的东西可以减轻在组件内部创建动态 HTML 的负担。当然，在使用 JSX 时，可以使用纯 JavaScript 来生成模板。
也就是说，因为 React 的特殊语法，在 React 中编写组件需要更多的学习和练习。
Vue
Vue 的单文件组件分为三个独立的部分：< template>、< script>和< style>，每个部分都包含相应类型的代码，因此对于传统型 Web 开发人员来说会更方便。
作为一个渐进式框架，Vue 提供了简单的定制能力。例如，只需要一个简单的配置，就可以使用 JSX 代替< template>。另外，只需要在< style>中添加 lang=“scss”属性，就可以编写 SCSS 而不是纯 CSS。类似地，将scoped 属性添加到< style>中，Vue 组件就可以实现开箱即用的 CSS 作用域（也就是 CSS 模块）。
React 的 JS/JSX 组合使用起来没什么问题，只是有时候显得有点混乱（特别是在添加样式组件时）。需要指出的一点是，在使用 SFC 时需要额外的构建步骤，而 Vue 不需要。如果你选择了 React，这可能会是一个问题，因为 JSX 需要额外的构建步骤。如果你希望可以直接将脚本文件加入项目中而不需要重新构建，那么 React 可能不是你的菜，除非你愿意使用 React.createElement() 代替 JSX。所以，在这种情况下，Vue 可能会是更好的选择。
灵活性
React
React 专注于 UI，所以在构建 UI 组件时可以从它那里获得很好的支持。
React 官方库不提供一些高级功能，如状态管理。大多数 React 应用程序都使用 Redux 进行状态管理，而 MobX 也正在获得人们的关注。
router 不属于官方库的一部分，而是作为第三方包，由 React 团队提供支持。
Vue
作为一个渐进式框架，Vue 只允许使用最基本的功能来构建应用程序，但同时也提供了一些开箱即用的东西：用于状态管理的 Vuex、用于应用程序 URL 管理的 Vue Router、Vue 服务器端渲染。
工具
React
React 有一个叫作 create-react-app 的第三方 CLI 工具，可作为在 React 项目中构建新应用程序和组件的脚手架。
CLI 工具还支持运行单元测试和端到端测试、代码 linting 和本地开发服务器。
在 IDE 方面，React 官方和社区都提供了非常好的支持。
Vue
Vue 有一个叫作 Vue CLI 的官方 CLI 工具，与 React 的 create-react-app 非常相似，Vue CLI 为新开发的应用程序提供了脚手架。
此外，主要的 IDE 对 Vue 都有很好的支持（不如 React，但有 WebStorm 和 VSCode 坐镇）。
在某些方面，Vue 的工具真的很棒。另外，Vue 与 Typescript 的集成现在还不完美，如果考虑与 TS 集成，还是选择 React。
移动开发
React
React 有一个用于构建原生移动应用程序的移植版本，也就是 React Native，它是当前“编写一次（在 JavaScript 中），到处使用（在原生 iOS 和 Android 中）”的解决方案。
生产环境中有很多使用 React Native 构建的应用程序。
Vue
对于 Vue 来说，构建移动原生应用程序不仅只有一种选择。与 React Native 不一样的是，在 Vue-Mobile-Native 领域并没有明确的领导者。
NativeScript 可能算得上是佼佼者（它也是 Angular 的领先解决方案），但除此之外还有 Weex 和 Quasar。
社区
React
在 StackOverflow 网站上，使用 #reactjs 标记的大概有 88,000 个问题。超过 40,000 个 npm 包可供 React 开发人员下载使用。
在最近的一个有关前端工具调查中，超过 40％的受访者表示他们对使用 React 感到满意。
React 的社区确实很重要，但比 Vue 社区更分散，而且很难为常见问题直接找到答案。
Vue
在 StackOverflow 网站上，使用 #vue 标记的问题有 18,000 个。可安装的 npm 包有近 10,000 个。
在最近的一次调查中，17％的受访者表示他们对使用 Vue 感到满意。但事实上，与 React 相比，有两倍的开发人员表示对学习 Vue 感兴趣，因此 Vue 开发人员市场的增长在未来可能会比 React 更快。
在 GitHub 上，Vue 的 Star 数超过了 React。
Vue 开发中的大多数问题都可以直接在文档中找到答案，当然，来自社区的答案会更加精准。
支持
React
React 由 Facebook 创建和维护，在 Facebook，有一个团队定期为 React 提供支持（React 也被用于 Facebook 的很多项目中）。
据称，Facebook 的 React 团队包括 10 名专职开发人员。但值得注意的是，Facebook 研发部门的多个团队正在将 React 用于内部和外部的项目中，并且每个团队都可以将变更请求推送到代码库中。
React 基于 RFC，没有所谓的发展路线图。
Vue
Vue 是一个独立的库，由尤雨溪创建。他还负责管理 Vue 的维护和发展路线图。
Vue 团队包括 23 名专职开发人员。
Vue 的路线图可以在他们的 GitHub 仓库中看到（https://github.com/vuejs/roadmap）。
整体优点
React
- 行业标准
- 大量熟练使用该框架的前端开发者
- 更容易招到有经验的前端开发者
- 有稳定的过去和大公司的支持，更安全的未来和稳定性
- 庞大的社区，大量的工具和第三方库
- Web 和移动应用可以共享一些代码
Vue
- Vue 内置的核心模块（Vuex、Router 等）非常棒
- 面向“未来”，而不是“现在”
- 保持独特，引领潮流而不是跟随
- 更快的起步，前端开发者和后端开发者都感觉 Vue 代码很自然，速度很快
- 更好地促进全栈文化，允许跨产品开发
总结
React 有更大的生态圈和更好的工具，外面有更多面向 React 开发人员的工作岗位。Vue 更容易上手，并提供了强大的灵活性和 API，可以避免 React 的那些复杂模式。有些机制——比如向父组件发送事件而不是将回调作为属性传递——可以让代码更清晰，但同时也是一个额外的抽象。
Vue 有更多与 Vue 紧密集成的核心库，而 React 的核心库较少，但一般性用途的库较多，通常由社区开发。随着生态系统的发展，最终会有大量的库做大致相同的事情。大型生态圈最重要的作用在于，某人可能已经解决了你正面临的问题，所以，从这方面来说，拥有更大生态圈的 React 占据了优势，也是一个重要的考虑因素。
在很长一段时间内，React 和 Angular 都是框架游戏的主要参与者，而且每隔一小段时间就会出现一个新框架。它们试图挤进来分一杯羹，但都没有成功，除了Vue。
React 是现在的领头羊，无论是在行业炒作还是社区支持方面。React 可以轻松构建复杂而直观的 Web 和移动应用程序，但这是有代价的——框架的复杂性和样板代码。小型项目相对直观，但大型项目往往变得很复杂。React 引入了很多新的范式，这对学习曲线有一些负面影响。
Vue 更加精简，是一个新颖的框架，而且简单易学，样板代码少，性能高，灵活且完整。现在很多 Web 应用程序可以使用 Vue 构建，并且速度比 React 快。Vue 很有趣，开发起来也很简单。
最近，前端社区内开始出现的关于 Vue 稳定增长的良好氛围，暗示着 Vue 很快就会变得像 React 一样受欢迎。
分享 IT 技术和行业经验，请关注-技术学派。
