在2019年的Vue.js和ReactJS之间进行选择：什么最适合您的项目？

该文章最初发表在 Codica Blog上 。

如今，每个公司都致力于在短时间内创建高质量的Web解决方案。为了付诸实践，开发人员社区可以从许多JavaScript库和框架中进行选择，并通过辩论找到最佳的库和框架。

如果我们看一下Vue.js和ReactJS ，在Codica我们认为它们作为前端开发的原因是多方面的发展最为Swift的工具。我们使用Vue和React来创建多种产品来完成多项任务。虽然这些开发工具可以帮助创建相同的产品和应用程序，但它们都有优点和缺点。

本文的目的是在许多方面比较Vue.js和ReactJS：从一般信息到技术功能。这两个Web开发工具都具有成熟的社区，广泛的支持和受欢迎程度，但是Vue.js是框架，React是库。那么，为什么我们要比较桔子和苹果呢？

为什么选择Vue和React？

进行比较的关键因素之一是Vue.js框架创建者Evan You使用ReactJS作为新框架开发的灵感来源。

我想，如果我可以提取我真正喜欢的关于React的部分，并在不涉及所有额外概念的情况下构建真正轻量级的东西呢？我也对它的内部实施如何工作感到好奇。我开始本实验只是尝试复制此最小功能集，例如声明性数据绑定。基本上这就是Vue的开始方式。

—埃文·尤

这些Web开发工具彼此特别相似。我们甚至可以从显示此类相似之处的Vue.js官方文档中看到它。最初的主要共同点是：

虚拟DOM
React性和组件结构
JavaScript用法

乍一看，Vue和ReactJS的相似之处多于差异。让我们深入了解其他方面，以更深入地了解和比较这些工具。

到期

在分析项目开发并尝试确定应该使用什么作为获得结果的工具时，在选择尚未成熟或尚未批准的工具时，需要小心谨慎。

使用不成熟的工具时，存在某些风险：

错误或漏洞。
如果您需要帮助，它可能没有很大的知识库或社区。

Vue.js和React分别由一家大型公司和一个经验丰富的开发人员发布，在需要帮助的情况下，这给了我们稳定性和巨大社区支持的信心。

让我们先来看一些事实：

ReactJS由Facebook在2013年开发和发布，目前仍在自己的产品（如WhatsApp和Instagram）中实现。它是GitHub上最受欢迎的JS框架之一，在撰写本文时，它约有117,500星。

Google的前创意技术专家Evan You在2014年2月对Vue.js进行了专题报道。 Evan在2012–2014年期间负责Google Creative Lab的UI / UX原型和创意实验，并与React和Angular合作。之后，他总结了对这些框架的想法，并在相同的功能内创建了一个完全轻量级的框架。

到目前为止，Vue还是Web开发中最受欢迎的框架之一，在GitHub上有122,000个star 。

这是GitHub Stars比较历史记录。

总而言之，Vue.js和React具有成熟的历史，支持和在开发者社区中的流行。所有这些都引起了从技术方面进行比较以发现开发过程中关键差异的兴趣。

社区与知名度

在计算器上，有内115.900问题#reactjs 。此外，在撰写本文时，React开发人员可以使用大约50.000 npm软件包。

ReactJS社区比Vue.js的社区大得多。但是，主要问题是React的零碎性质，因此，对于常见问题的反馈要复杂得多。

另一方面，Vue是一个渐进的轻量级框架，可让您轻松快速地开发解决方案。 Vue.js也更容易学习，因为它花费的时间更少并且学习曲线要低得多。但是，找到Vue开发人员并获得将来的产品维护更加复杂。

说到Vue.js的流行程度，在＃vue.js中有约27.000个关于StackOverflow的问题，约有14.000个npm软件包可供Vue开发人员使用。

为了比较社区的支持程度和受欢迎程度，让我们熟悉一下由State of JavaScript创建的2017/2018最受欢迎JS框架调查表。他们每年从超过20.000个开发人员那里收集数据，涉及从前端框架到测试库的主题。

如您所见，React在拥有最大的知识库，支持和社区的最受欢迎JavaScript库方面遥遥领先。所有这些意味着您可以更快地找到React开发人员，并且将来的支持也将更加容易。

开发速度和成本

在开发开始时，您需要选择要采用JavaScript框架/库。可以使用Vue和ReactJS来创建任何网站或应用程序。问题是开发速度和成本。

发展速度

我们的经验表明，Vue.js和React在开发速度上特别相似，因为还有许多其他库，框架和软件包可以帮助您快速构建应用程序。一切都取决于开发人员的编码经验和技能，这些技能和技能使他们倾向于使用ReactJS或Vue，但实际上，类似任务的时间估算示例性地相等。

成本

成本取决于许多因素，例如开发人员的经验和资历水平，位置等，因此成本可能会有很大差异。为了记住一些数字，我们添加了Codementor平台的React和Vue.js的平均成本。

ReactJS开发人员的平均评分：

Vue开发人员的平均评分：

技术特点

工装

React提供了一个名为create-react-app的第三方CLI工具，该工具可帮助开发人员加速诸如应用程序开发，添加脚本和安装必要依赖项之类的工作。

在发布create-react-app之前，开发人员每次启动新应用程序时都必须从以前的应用程序复制Webpack-config和其他.rc文件，或者手动配置所有内容。在不使用create-react-app的情况下，您必须将相同的配置从一个项目放置到另一个项目中。它并不需要很多时间，但实际上很无聊。

在 创建React的应用程序内 提供了一个基本的结构构建应用程序的CLI界面，它安装所有必要的依赖，并增加了脚本到的package.json运行，测试和构建应用程序。

确实，ReactJS获得了对主要IDE的巨大支持。

Vue-cli是用于Vue.js的快速项目创建的工具。这样的项目具有现成的结构，已安装的配置以及许多基本文件。

Vue-CLI的主要优点：

没有阻塞，可以在开发生命周期中随时添加插件。
由于没有设置插件，您可以花更多的时间在开发上，而不用自定义。
易于改进，因为可以自定义调整而没有“异常值”。
允许开发人员创建自己的插件和模板。

灵活性

React以UI为中心，因此，一开始，您将获得构建UI组件的帮助。

但是，ReactJS不为您提供状态管理。在处理React应用程序时，您需要使用Redux作为状态管理工具。迄今为止，MobX作为ReactJS的合作伙伴也越来越受欢迎。

此外，谈到React路由器-它不是一个官方软件包，而是第三方软件包。

作为动态框架， Vue.js允许简单地利用其最基本的工具来创建应用程序，但是，如有必要，它还提供了您可能需要的所有功能的绝大部分：

Vuex用于状态管理。
Vue路由器，用于应用程序URL管理。
Vue.js服务器端渲染的服务器端渲染器。

无论大小应用程序，Vue都比React更直观。

移动开发

React Native帮助React开发人员构建移动应用程序—这是一个使用JavaScript创建跨平台iOS和Android应用程序的框架。它出现在2015年初，是基于React的。它不使用WebView和HTML技术，但是本机组件在JS中具有绑定，并包装在React中。实际上，iOS对React Native的支持要比Android好，但是Android支持的动态性很有希望。

另一方面，Vue.js与NativeScript （NS）配对，使您可以使用XML，CSS，JavaScript构建跨平台应用程序。 NativeScript解决了与上述React Native相同的问题，但是它们之间存在一些差异。

对于Web开发人员而言，使用HTML / CSS / JavaScript可以更轻松地了解NativeScript语法和实现。在标记创建中，XML的用法也类似于HTML。
NativeScript可以直接访问本机平台API。

为了比较这两个框架的受欢迎程度和开发人员社区的使用情况，让我们熟悉JS 2018图表状态。

另外，这是一个Google趋势图，显示了过去4年中React Native和NativeScript的比较表。

总而言之，React Native在开发人员社区中更为流行和可利用，这意味着可以将大量现成的解决方案用于移动开发。

成分法

通常，当一个组件有一个文件时，Vue.js和ReactJS在开发中都会实现相同的组件方法。仍然存在一些有趣的发现。

React颠覆了既定的最佳实践。数十年来，开发人员一直试图将模板和嵌入式Java逻辑分开，但在JSX中，它们又被混合了。也许这听起来是全能的，但您应该听听彼得·亨特（Peter Hunt）的演讲“React：重新思考最佳实践” 。

他指出，模式和逻辑的分离只是技术的划分，而不是责任。您必须创建组件而不是模板。组件可重用，可集成并且便于单元测试。

JSX是一个可选的预处理器，具有类似HTML的语法，然后将其编译为JavaScript。因此，有些奇怪之处-例如，您需要使用className代替class ，因为class是JavaScript中的保留关键字。

JSX对开发来说是一个很大的优势，因为您可以将所有内容放在同一位置，并且自动完成和编译阶段的检查将更快地进行。当您在JSX中出错时，ReactJS不会编译代码并显示错误所在的行号。

Vue提供“单个文件组件”。这就像在职责划分方面的折衷方案—模板，脚本和样式不在一个文件中，而是在三个不同的有序部分中。这意味着您将获得语法高亮显示，CSS支持以及轻松使用Jade或SCSS等预处理器的功能。

各种来源都指出JSX更易于调试，因为Vue不会在HTML中显示语法错误。并非如此，因为Vue.js将HTML转换为呈现函数-因此显示的错误没有问题。

让我们熟悉一下在React和Vue中为待办事项列表应用程序创建的相同组件，以了解ReactJS JSX和Vue.js模板之间的区别。

Vue组件结构：

 <template>  <div class="ToDoItem">    <p class="ToDoItem-Text">{{todo.text}}</p>      <div class="ToDoItem-Delete"        @click="deleteItem(todo)">-      </div>  </div></template>

React组件结构：

 import React, {Component{ from 'react';import './ToDoItem.css';

class ToDoItem extends Component {  render() {    return {      <div className="ToDoItem">        <p className="ToDoItem-Text">{this.props.item}</p>        <div className="ToDoItem-Delete" onClick={this.props.deleteItem}>-</div>      </div>    );  }}

export default ToDoItem;

性能

为了检查ReactJS和Vue.js的性能，我们转到了一个很棒的js-framework-benchmark ，它有助于比较两个框架的性能。

总而言之，React具有出色的性能，但是与特别慢或特别快的开发工具（例如Inferno ）相比，ReactJS和Vue彼此非常接近。

国家管理

通常，两种Web开发工具在管理组件状态方面都具有相似的方法，但是在不变性和其他方面仍存在一些差异。让我们考虑所有这些。

由于状态无处不在，因此创建UI十分困难-数据会随着时间变化，这会增加复杂性。当应用程序增长并变得更加复杂时，使用状态的某些方法会很有帮助。对于小型应用程序，这可能是一种蛮力，而Vanilla JS之类的东西就足够了。

状态管理如何工作？组件描述特定时间点的UI。当数据更改时，框架将重新绘制整个UI组件-显示的数据始终是相关的。我们可以将此想法称为“ UI作为功能”。

换句话说：应用程序状态完全在统一存储内部的对象树中。它有助于调试应用程序，某些功能变得更易于实现。状态处于只读模式，并且只能通过操作来更改以免出现竞争状况（这对于调试也很有用）。创建缩减器以指示动作可以如何转换状态。

Redux和Vuex

通常， React用于某种应用程序的数据流库中。 Redux是最受欢迎的选择。一个类似的Vue数据流库称为Vuex。实际上，从Redux到Vuex的过渡实际上是不费力的，因为这两个库比ReactJS和Vue.js本身具有更多的共同点。

React通常与Redux配对。 Redux用三个基本原理描述自己：

唯一的真理来源
状态为只读
使用纯函数进行更改

主要区别在于Redux在很大程度上依赖于状态不变性，因为Redux是在考虑ReactJS的情况下创建的。但是，建议避免变异用作专业或状态的值以优化React性能。

在组件的阶段更改中，它将开始重新渲染组件的整个子目录，从根权限开始。为了避免不必要地重新运行子组件，如果可能，您需要使用PureComponent或实现shouldComponentUpdate 。您可能还需要使用不可变数据结构来使状态更改更加优化。

相反，Vuex不在乎状态的不变性。

在Vue中，在渲染过程中会自动跟踪与组件关联的依赖关系，因此系统确切知道在状态更改时实际上应重新显示哪些组件。

这导致ReactJS和Vue.js组件与资源库交互的方式上存在一些差异，我们想向您详细介绍。

Redux数据流非常严格和简单。该组件调度动作创建者返回的动作。然后，Reducer根据动作想要执行的操作生成一个新状态。最后，组件可以监视存储库中存储的更改，并可以使用connect()函数访问存储。

每个动作都要经过动作创建者。尽管从理论上讲有可能直接从组件触发动作，但是这种情况很少发生。动作的语法促使我们将逻辑封装在动作创建者的功能中，即使在最琐碎的动作中也是如此。

尽管Vuex中的数据流非常相似，但在组件与状态交互的方式数量上并不严格。首先，组件可以发送动作。这通常用于创建异步文件，例如从源代码获取数据。

之后，该动作将导致突变。类似于reducer的变异函数是唯一允许更改状态的函数。但是，还有另一种方法：组件可以直接进行突变，有时减少数据流非常诱人，完全放弃了动作。

总而言之 ，状态管理是React和Vue.js之间的主要区别。与Redux一样，Vuex是一个库，其创建者受到Flux的启发。与Redux不同，Vuex会像Redux还原器那样更改状态，而不是使其变为不可变并完全替换。

这使Vue可以自动检索状态更改时要重新呈现的警报的数据。 Vuex无需使用专门的reducer，而是使您可以使用称为模块的存储来组织应用程序状态管理。

React vs Vue：比较摘要

React

如前所述，如果需要构建复杂的Web应用程序（例如电子商务平台，市场等），则应选择React。

通过社区量，将来的维护和自定义将变得更加容易，因为您可以看到大量的贡献者和开发人员准备构建任何应用程序，因为它们的数量成倍地超过Vue。

使用ReactJS的另一个原因是，大量的库和工具可用来简化和加速开发过程。现成的解决方案可用时，无需从头开始编写函数。

Vue

另一方面，如果您对创建轻量级且易于修复的应用程序感兴趣，则Vue.js是一个不错的选择。学习曲线较低，因此可以在短时间内掌握框架并进入应用程序开发。

Vue社区小于React，但它以惊人的速度增长，这使得创建与使用ReactJS相同的解决方案成为可能。随着贡献量的增加，可用的工具和库的数量也随之增加。

总结所有优点和缺点，让我们看一下Vue.js和React比较表。

如我们所见，Vue和React都具有强大的工具和功能，可帮助我们进行Web开发。但是，在选择采用哪种方法时，您需要记住表中列出的差异，以便做出正确的选择。

何时选择React或Vue？

可以针对任何需要和要求（例如创建Web应用程序，单页应用程序和用户界面组件）实施这两种Web开发工具。

总结一下，让我们总结一下上述Web开发工具的所有信息，优缺点，看哪种对您的业务是更好的选择。

这是比较表，其中考虑了选择ReactJS或Vue.js的不同因素：

综上所述，Vue和React都是用于创建复杂Web解决方案的强大工具，因为它们可以为您提供许多在任何任务中感到舒适的可能性。

无论选择什么，都不会出错！

最初在 www.codica.com上 发布。

翻译自: https://hackernoon.com/choosing-between-vue-js-and-reactjs-in-2019-whats-best-for-your-project-14e6de33c591