Vue 与 React——哪个更适合你的应用？异同点分析

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

前段时间，我决定提升自己在Web应用程序前端方面的技能。在众多流行的JavaScript框架中，我选择了Vue，并且从第一个“待办事项清单”开始就爱上了它。这份爱的结晶就是Evally——一个开源的单页应用程序，用于根据员工的软技能和技术技能对其进行评估和管理。

然而，当前商业项目的特性和技术栈激发了我学习 React 的兴趣。在使用这些强大的工具几个月后，我想做一个简短的比较和总结。

React.js 简史

React 由 Facebook 开发团队创建，并于 2013 年以开源许可证发布。它的改进是为了满足全球最大社交媒体平台日益增长的需求。 

除了 Facebook 及其旗下服务（如 Instagram 和 WhatsApp）之外，React 还被许多其他流行的 Web 服务所使用，例如：

Netflix——在线电影和电视节目流媒体平台；
《纽约时报》——一份具有全球影响力和读者群的美国报纸；
Codecademy——一个在线互动学习平台；
Airbnb——一个用于安排或提供住宿的在线市场
；Disqus——一个全球博客评论托管服务。

Vue.js 简史

Vue 的第一个公开版本于 2014 年发布。与 React 不同，Vue 最初是由一位名叫 Evan You 的开发者独立创建的，他曾是谷歌的员工。他的目标是汲取其他框架的优点，打造一款真正轻量级且易于学习的 Web 开发工具。

我当时想，如果我能把Angular里我真正喜欢的部分提取出来，构建一个非常轻量级的东西，那会怎么样呢？
——Evan You

目前，Vue 及其相关开发工具由庞大的贡献者社区维护。近期计划发布 3.0 新版本。使用 Vue 编写的知名应用包括：

GitLab——一款基于Web的项目规划、源代码管理和DevOps工具；
Behance——一个面向创意人士的社交媒体平台；
阿里巴巴——全球领先的移动批发市场；
UpWork——一个全球自由职业平台，企业和独立专业人士可以在这里远程联系和协作；
BuzzFeed——一家美国媒体、新闻和娱乐提供商；
Grammarly——一款利用人工智能和自然语言处理技术的数字写作工具。

Vue 与 React 对比：异同点

现在是时候更仔细地了解一下这两个 JavaScript 框架了。尽管它们使用相同的核心语言，但两者之间仍然存在一些差异，这些差异可能会影响您为下一个应用程序项目选择哪一个。

React.js 和 Vue.js 相似吗？

Vue 和 React 有很多共同之处。我们重点关注它们最重要的特性：

虚拟 DOM——这种机制可以提升应用程序的性能。React 和 Vue 会检测哪些网站元素发生了变化，并仅重新渲染这些元素。这种方法比重新渲染整个 DOM 结构更省时。
响应式和可组合的视图组件——许多被称为组件的小代码块可以在应用程序的不同位置使用，而无需从头开始编写和设置它们。这使得开发过程更加快捷，代码也更易于维护。
核心库和扩展——这两个框架都可以使用额外的配套库来创建高级应用程序，例如用于自定义路由和状态管理的应用程序，也可以仅基于框架的核心部分来创建网站上的简单元素，例如登录表单。

有什么区别？

乍一看，最大的区别在于构建视图层的方式。在 React 中，所有组件都使用渲染函数，该函数根据用 JSX 编写的代码生成 UI 元素——JSX 是一种声明式的、类似 XML 的语法，可在 JavaScript 中使用。

Vue 也提供了渲染函数和对 JSX 的支持，但默认情况下，它使用 HTML 模板作为一种更简单的替代方案。这种方案有几个优点：

许多开发者都熟悉 HTML 语法，因此 Vue 模板对他们来说可能更自然、更易读，
也更容易逐步迁移现有的基于 HTML 的代码片段，因为任何有效的 HTML 代码也都是有效的 Vue 模板。

此外，Vue 还引入了一些自定义但直观易懂的指令，用于处理条件语句、循环语句和数据绑定等元素。您可以比较下面用 Vue 和 React 编写的同一个组件。

使用 Vue 和 React 编写的组件结构示例

Vue 比 React 更好吗？

在这种情况下，答案可能和用户数量一样多。这还取决于我们考虑哪些方面。根据 State of JS 2018 网站的数据，我制作了一张图表，展示了开发者最赞赏的功能。

使用特定框架的开发者百分比

由此可见，Vue 被评价为简单易学、文档完善且性能优异的工具。另一方面，React 则因其丰富的包生态系统、强大的开发工具和经验丰富的开发团队而更受青睐。

在为您的应用创意选择最佳技术栈时，探索阶段最大的优势之一就在于此。通过这项独立的咨询服务（这并不意味着您必须委托我们开发应用），您将获得应用线框图、技术文档、估算以及针对您的定制软件的最佳编程语言建议。

Vue 会取代 React 吗？

很久很久以前，在一个遥远的地方，有一个王国……我可以给你讲些童话故事或者做一些模糊的预测，但这并非重点。事实是，目前这两个 JavaScript 框架在各自的领域都非常流行，而且它们的流行方式也十分相似。从 NPM 下载量来看，React 遥遥领先。另一方面，Vue 在 GitHub 用户中已经流行了一段时间。 

我认为，每种工具总会有拥护者和反对者。最好的方法或许是精通一种工具，同时对另一种工具有所了解——这样才能在技术栈方面拥有更广阔的视野。

Vue & React - 每周从 NPM 下载

Vue & React - Github 上的明星

你的应用项目应该使用哪个框架？

Vue 被其创建者称为渐进式框架，这意味着您可以从一个小型组件入手，逐步将您的网站扩展为交互式专业应用程序。Vue 易于学习，文档完善，能够帮助您的团队更快地开发 MVP（最小可行产品）。对于现有项目，Vue 的快速集成功能可以更轻松、更快捷、更经济地解决复杂问题。

从最初版本开始，React 的目标就是构建大型 Web 应用程序，因此，将其用于小型项目可能不太合适。虽然基本配置需要更多时间，但对于长期项目而言，它仍然是可行的。

我们不能忽视经验丰富的 React 专家这一更广泛的市场，这对于不断壮大的开发团队或需要寻找替代人选的情况至关重要。

阅读文章： 如何成为一名更优秀的初级开发人员？

结论

总而言之，Vue 和 React 都是创建现代化高级应用程序的优秀工具。在决定项目中使用哪个框架之前，你需要明确你的使用场景，并回答自己的需求和期望、预算以及截止日期等问题。

Vue 更适合中小型应用，以及周期较短的 MVP 项目。Vue 环境还提供官方的路由、状态管理和服务器端渲染包，确保了最新的支持和更好的集成。这正是我选择 Vue 并将 Evally 构建为单页应用的主要原因。简洁优雅的模板语法和清晰的组件结构，让我在使用这个框架时倍感愉悦。

最后，React 可以被视为一个成熟的框架，拥有丰富的生态系统和经验丰富的社区。尽管 React 需要第三方解决方案来处理路由和状态管理，但绝大多数开发者都拥有值得信赖的库和足够的经验来克服这些不足，并创建出令人惊艳的应用程序。

选择合适的技术对应用程序的成功至关重要。我们还有更多对比文章。想打造完美的移动应用程序？阅读Swift 与 React Native 的对比文章。还在 Ruby on Rails 和 Laravel 之间犹豫不决？了解一下这些技术的优缺点。

我们可以将重要的编程知识（教程、评论、技巧）直接发送到您的邮箱。点击此处订阅我们的新闻简报！