Vue和React大比拼，你pick谁？

策画｜覃云

Nenon将在TypeScript、代码艺术风格、一般而言文档模块、操控性、稳定性、辅助工具、终端合作开发、街道社区、适用性、项目组支持等方面对 React 和 Vue 展开较为。

React

React 的非官方文档格式为初学者提供更多了许多进阶手册，具有一定后端架构合作开发经验的合作开发人员能在几个小时内认知架构的核心理念基本原理。

非官方的 React 文档格式称得上较为完备地，但比不上 Vue 的非官方文档格式那么明晰科学规范。文档格式囊括了必要性的许多业务流程，但仍然缺乏许多边沿示例说明。随着项目越变越大，这些边沿示讨论会变成使用者关键点。

React 算不上是一个完备的架构，它提供更多了核心理念，而其它绝大多数高阶的模块是由街道社区合作开发的，这毫无疑问给TypeScript增加了许多复杂程度。

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

库大小（通过网络传输 / 未压缩）：32.5KB/101.2KB。

在 DOM 操作方面，React 的整体操控性非常好。它比 Angular 快得多，但比 Vue 慢许多。

React 提供更多了开箱即用的服务器端渲染（SSR）支持，这对某些类型的实现来说可能很有用。

内置支持捆绑和摇树优化（tree-shaking），以便最大限度地减少最终使用者的资源负担。

Vue

库大小（通过网络传输 / 未压缩）：31KB/84.4KB。

除了速度快，Vue 还是一个渐进式架构。它的核心理念库只专注于视图层，所以能轻松上手，并与其它库或现有项目集成在一起。

与 React 类似，Vue 内置支持捆绑和摇树优化，以便最大限度地减少最终使用者的资源负担。

React

React 专注于 UI，所以在构筑 UI 模块时能从它那里获得很好的支持。

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 于 2013 年 3 月发布。

SimilarTech 的数据显示，React 已经被用在 205,000 个领域中，每月增长率为 2.46％。

React 在生产方面经过了很好的测试，超过了 Vue。React 建立了一个庞大的街道社区，背后有 Facebook 在撑腰。

Vue

Vue 于 2014 年 2 月发布。

SimilarTech 的数据显示，Vue 已经被用在 26,000 个领域中，每月增长率为 3.34％。

大约一年半前，Vue 成为了一个标准。它已被广泛使用，包括许多大公司，如 GitLab、阿里巴巴、百度等。

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

因为 React 是目前最流行的架构，所以 React 合作开发人员在市场中颇具优势。

此外，通过学习 React，能让合作开发人员的简历锦上添花，因为他们将获得有关 React 的宝贵经验。

Vue

，并且合作开发人员都急切地想参与 Vue 项目，唯恐落于人后。现在，找到对 Vue 有一定经验的合作开发人员并不罕见。

React

行业标准

大量熟练使用该架构的后端合作开发人员

更容易招到有经验的后端合作开发人员

有稳定的过去和大公司的支持，更安全的未来和稳定性

庞大的街道社区，大量的辅助工具和第三方库

Web 和终端应用能共享许多标识符

Vue

Vue 内置的核心理念模块（Vuex、Router 等）非常棒

面向“未来”，而不是“现在”

保持独特，引领潮流而不是跟随

更快的起步，后端合作开发人员和后端合作开发人员都感觉 Vue 标识符很自然，速度很快

更好地促进全栈文化，允许跨产品合作开发

React

后端合作开发人员和后端合作开发人员之间区分得很清楚，须要许多学习才能成为专家

须要更多的时间来训练合作开发人员

交付较慢（至少对于最初的发布来说）

Vue

更具实验性，不是冒险，而是前卫

更难找到经验丰富的 Vue 合作开发人员

可用的插件和辅助工具更少，街道社区更小。

合作开发人员不像 React 那样有那么多经验

Vue 使用了 DSL 并且具有较大的 API 表面，这也是人们认为不好的地方。这些都是事实，至少它具有比 React 更大的 API 表面。Vue 使用的 DSL 是另一种抽象，就像 SFC 一样。它们旨在提高你的合作开发效率并保持标识符的整洁。JSX 的存在也是出于同样的原因，它也是一种非标准的抽象，但同时又能让你充分利用 JavaScript 的全部威力。但 JSX 不是 JavaScript，而且永远不会是。Airbnb 的样式手册禁止在.js 文档中包含 JSX，因为它们是非标准的，它们必须被包含在单独的.jsx 文档中。

一旦你熟悉了 Vue 的 DSL，就能提高开发效率，因为它提供更多了许多辅助方法。另一方面，你也须要学习许多 Vue 的特定语法。有些人认为学习新 API 须要附加的认知成本，这是无可厚非的。因为 React 同样引入了重大的认知成本，而原因却恰恰相反，它的小 API 表面意味着，为了完成某些功能，我们须要使用相对复杂的模式。但请记住一点，React 也一直在演化。React 项目组一直在响应 React 使用者的需求，并在他们认为有意义的地方做出改进。Context、Time Slicing、Suspense，这些特性已经或者即将被添加进来。

接下来让我们谈谈抽象。这些后端架构都做到了或多或少的抽象。使用纯 JS 合作开发声明式 UI 模块非常困难，于是 React 和 Vue 出现了，它们还提供更多了一系列有用的补充，让我们能将 State 绑定到 DOM，而不须要将它们保存在 DOM 中，并展开高效的渲染。

也就是说，如果你不想，也能不用 Vue 的模板和 DSL，如果你想，也能使用 React 的 JSX 或 createElement() 函数。你还能自己选择模板语言，如 Pug。Vue 在这方面非常灵活，不知道人们是否也意识到了这一点。使用 SFC 编写真正的 UI 模块，使用纯 JS 编写无渲染模块（只导出没有模板或样式的脚本块），然后根据须要切换到 JSX 或渲染函数，这样给了你更大的控制权，并保持标识符的整洁。

当你开始编写更高阶的模块或真正可重用的模块（特别是包装其它模块的模块，为其它模块提供更多附加的行为）时，就能看到许多很明显的差别。在使用 React 时，你须要用到高阶模块、渲染属性或函数子模块模式。这些模式完全没有问题，它们能解决真正的问题，但它们增加了显著的认知成本（比学习新语法的成本更高），因为它们都是相对复杂的模式。在 Vue 中，较大的 API 表面提供更多了许多传递数据的方法（如作用域槽，scoped slot），所以几乎不须要用到那些复杂的模式。

当然，这并不是说 Vue 就一定比 React 简单，或者说 React 就特别令人困惑。但人们可能忽略了很重要的一点，就是在使用 React 时，很快就会用到这些复杂的模式，而 Vue 的作用域槽却不会被经常用到。造成这种情况的原因有许多，但重要的不在于它们能做什么，而在于在解决常见问题时，是不是经常要用到复杂的解决方案。

React 有更大的生态圈和更好的辅助工具，外面有更多面向 React 合作开发人员的工作岗位。Vue 更容易上手，并提供更多了强大的稳定性和 API，能避免 React 的那些复杂模式。有些机制——比如向父模块发送事件而不是将回调作为属性传递——能让标识符更明晰，但同时也是一个附加的抽象。

Vue 有更多与 Vue 紧密集成的核心理念库，而 React 的核心理念库较少，但一般性用途的库较多，通常由街道社区合作开发。随着生态系统的发展，最终会有大量的库做大致相同的事情。大型生态圈最重要的作用在于，某人可能已经解决了你正面临的问题，所以，从这方面来说，拥有更大生态圈的 React 占据了优势，也是一个重要的考虑因素。

在很长一段时间内，React 和 Angular 都是架构游戏的主要参与者，而且每隔一小段时间就会出现一个新架构。它们试图挤进来分一杯羹，但都没有成功，除了 Vue。

React 是现在的领头羊，无论是在行业炒作还是街道社区支持方面。React 能轻松构筑复杂而直观的 Web 和终端插件，但这是有代价的——架构的复杂程度和样板标识符。小型项目相对直观，但大型项目往往变得很复杂。React 引入了许多捷伊范式，这对TypeScript有许多负面影响。

Vue 更加精简，是一个新颖的架构，而且非常简单易学，样板标识符非常少，操控性高，灵活且完备。现在许多 Web 插件能使用 Vue 构筑，并且速度比 React 快。Vue 很有趣，开发起来也很简单。

最近，后端街道社区内开始出现的关于 Vue 稳定增长的良好氛围，暗示着 Vue 很快就会变得像 React 一样受欢迎。

https://medium.com/fundbox-engineering/react-vs-vue-vs-angular-163f1ae7be56

https://www.reddit.com/r/javascript/comments/8o781t/vuejs_or_react_which_you_would_chose_and_why/e01qn55