译用Vue.js还是React ? 你会选择哪个呢? 为什么这样选择？

Posted 2021-05-01 前端面试官

用Vue.js还是React ? 你会选择哪个呢? 为什么这样选择？

这是个老生常谈的问题，翻译这篇也不是因为我赞同，因为我赞不赞同并不重要，重要的是Evan You（vue的作者）都赞同了，发twitter说“就React和Vue对比的评论中，这可能是第一篇我一边看一遍直点头的了”

https://twitter.com/youyuxi/status/1003366017840631809

Vue.js or React ? Which you would chose and why?

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

evilpingwin的回答

回答略长，可以不读。

差异是显着的，但它不仅仅是JSX vs Templates或大型API vs小型API的一个例子。 React和Vue开发者所做出的选择可能会带来一些后果，当你第一次使用其中一个时，你可能不会意识到这一点。 在选择框架时要提出的重要问题是“我希望我的复杂性在哪里”。

React和Vue可以完成很多相同的事情，他们只是以非常不同的方式去做。 从一些回复中，我想知道人们是否真的已经将两个库用于超出简单组件的任何内容，因为当您真的开始发现相对表面差异之外的差异时。

正如你可能不知道的那样，Vue鼓励单个文件组件的想法。一个包含模板，脚本和样式的独立块的文件。有些人觉得这很让人欣慰，因为它有一个熟悉传统前端开发的元素。我个人非常喜欢它们，并不是因为它看起来像html，而是因为它在页面上创建了结构化地标，使得它更快地导航文件本身。 React的JS / JSX组合工作正常，但事情有点混乱（特别是当你添加风格的组件）。无论你如何习惯它。值得指出的是，SFC的使用需要构建步骤，而Vue本身不需要。如果您考虑使用React作为选项，我怀疑这是一个问题，因为JSX需要构建步骤。如果你需要能够在没有构建步骤的情况下将一些脚本文件放到项目中，那么除非你愿意放弃JSX并使用React.createElement（），否则React并不是真正的选择。在这种情况下，Vue将是明显的选择。

Vue的另一个批评是它使用DSL（Domain-specific language，一个DSL或域特定语言是一种旨在解决特定编程问题的脚本语言）并且具有较大的API表面积。 这两件事情都是真实的，至少它有比React更大的API表面积，与一些相比它是相当小的。 这些是独立但相关的问题。 Vue使用的DSL只是另一种抽象，就像SFC一样。 它们旨在提高您的工作效率并保持代码清洁和声明。 JSX的存在基于同样的原因，它也是一个非标准的抽象，但可以充分利用JavaScript中的全部功能。 JSX不是JavaScript，永远不会，airbnb的风格指南禁止将JSX包含在.js文件中，例如，它们是非标准的。 他们必须进入他们自己的.jsx文件。

这是个人的选择，一旦你知道Vue的DSL，你可以通过大量的辅助方法和速记提高工作效率。 另一方面，你有更多的Vue特定的语法来学习。 有些人谈论关于学习新API的认知开销及其有效的关注（虽然我会质疑它），但我会认为React本身引入了重要的认知开销本身，但它的小API意味着我们需要使用相对复杂的模式 以实现某些事情。 稍后我会讲到这点。让我们不要忘记，React的API规模正在不断增长，并以合理的速度继续增长。 （删除线：我们最近得到了Context API，并且在某个时刻我们将得到Time Slicing和Suspense）

另外值得指出的是，Vue文档是API文档的黄金标准，并且非常清晰。 反应文档是平均的，但仍然很好，它是一个较小的API，所以你原则上不需要它们。 这个评论受到了批评，但我坚持认为，仅仅因为其他文档是垃圾并不会使React文档变得更好，并且与Vue文档相比，它们绝对是苍白无力的。 我不认为React文档特别糟糕，它们仅仅是您期望从一个出色的操作系统库中获得的，平均值。

尽管我们讨论抽象概念。 所有这些前端框架都是或多或少的抽象。 以纯粹的JS编写UI组件是非常困难的，因此React和Vue提供了这样做的方法，以及其他一些有用的添加，这些添加允许我们将状态绑定到DOM，而不将该状态存储在DOM中并呈现 高性能方式的变化。

所有这一切说，如果你不想使用Vue的模板和DSL，你不必使用Vue的模板和DSL。 您可以像使用React一样使用JSX或```createElement（）``函数。 您也可以使用您选择的模板语言，例如Pug。 Vue在这方面非常灵活，我不确定人们会意识到。 能够使用SFC编写真正的UI组件，只用JS编写无渲染组件（只导出没有模板或样式的脚本块），然后根据需要切换到JSX或渲染函数，可以在你的你工作的方式上为您提供令人难以置信的大量控制，并可以保持你的代码清洁。

当你开始编写更高级的组件或者想要编写真正可重用的组件（特别是包装其他组件的组件，使它们具有额外的行为），你将会看到一些明显的差异。 使用React，您需要使用一个或多个HOC（高阶组件），渲染prop或函数作为子组件模式。 这些模式完全没有错，它们是解决实际问题的绝佳解决方案，但它们会增加显着的认知开销（比学习新语法更重要），因为它们是相对复杂的模式。 在Vue中，它们通常是不必要的，因为更大的API暴露了许多传递数据的方法（如果感兴趣，请查看Scoped Slot）。 也就是说你可以使用这些模式或类似的模式以Vue的形式（Scoped Slot类似于渲染prop）。

这并不是说Vue不像React那么复杂，或者React特别令人困惑（Scoped Slot至少和渲染prop/ FaCC一样混乱），有些人没有发现的的重要问题是当使用React（许多流行的库使用它们）时，这些模式会更早期的就需要理解，而使用Vue的Scoped Slot却不是经常需要的。 这有多种原因，但是，重要的区别不是每个库都有能力，而是需要多长时间才需要找到更复杂的解决方案来解决常见问题。

他们都是拥有自己优势的强大库，任何你可以用一个做的事情，你都可以用另一个做（差不多都可以）。 React拥有更大的生态系统和更好的工具，React开发者有更多的工作。 Vue的入门速度更快，并提供了非凡的灵活性和API，使您能够避免使用React时需要的一些更复杂的模式，并以更加惯用的“Vue”方式工作。比如向父级发布事件，而不是将回调作为prop传递。它可以使你的代码更清洁，但它也是一个额外的抽象。 Vue也有更多的核心库，它们提供与Vue的紧密集成，而其工作方式与其他框架的替代方法大致相同。 React拥有更少的核心库（Vue中的一些标准功能需要带有React的库，比如检查prop类型），但是一般情况下还有更多的库（由社区撰写）。值得注意的是，随着生态系统的发展，最终会有很多库做大致相同的事情，我使用React或Vue的大多数库与样式之外的库本身无关（并且React会要求您重新思考你所知道的关于造型的一切，这不一定是坏事），所以你的倾向可能会有所不同。在我看来，大型生态系统最重要的影响是有人已经解决了你现在面临的问题，这是React受欢迎的最大好处，也是一个重要的考虑因素。

我两个都用，我两个都喜欢。 他们都以不同的方式惹恼我。 他们都有自己的怪癖，你必须习惯。 如果我必须选择一个？ 我会选择Vue。 但这并不意味着你应该。 亲自尝试一下，看看你的想法。 采取任何苛刻的批评或半信半疑地过度的赞扬，因为它们都是真正聪明的人们制作的非常优秀的库，而且你们使用任意一个也不会有太大的错误。 我试图保持公正，并标记出显着差异，我可能失败了，激怒了一些人，另一些更糟糕。

补充：我忘了提到vue-cli，就像create-react-app +一样。 这是一个非常棒的工具，很快就会有一个非常有趣的视觉用户界面。 所以在某些方面，Vue的工具真的很棒。 我也忘记提及与Vue的Typescript集成现在并不完美，您可能将TS与React集成更好。 食物决定思想（屁股决定脑袋）。

去玩吧（我觉得应该翻译成实践出真知）。

就css的烦恼，styled-jsx是可以解决的，当然了react用pug还是不太可行的，这篇文章虽然倾向于vue，我个人的立场可以参考《