【译】前端框架技术选型 React vs. Vue (vs. Angular)

这是该系列文章的第2部分：“Fundbox的前端技术选型”。第1部分介绍了Fundbox的技术现状以及我们重新设计它的动机。第2部分介绍了选择新框架背后的考虑：是迁移到React，Vue还是Angular。第3部分描述了我们如何从Angular迁移到Vue，同时保证我们产品发展路线不受影响。

Overview

重新考虑前端技术选型需要大量思考，讨论，决策，规划，管理和实施。我们首先需要做出的决定之一是选择一个前端框架来重新设计我们的产品。

我们研究了几个月来保证我们得出一个的更好决策。进行讨论，建立概念证明，与其他公司相关经验的同事进行面谈，并阅读大量在线材料。

在本文中，我将比较选型过程中的入围者。我们决定从以下几个框架中选出我们的下一个基础框架：Angular，React和Vue。

目标

我们的目标是构建一个全新的，现代化的，快速可靠的平台，为我们当前和未来的所有前端应用程序提供服务。

候选框架

• React
• Vue
• Angular

Angular

Angular在我们的选型过程中被提前放弃了,主要由于以下两个主要原因（更详细的推理可以在“Why move then?” 这里阅读）：

1. Angular是我们目前采用的框架，使用v1版本。Angular v2引入了许多改进，但它不向后兼容。这意味着升级到最新的Angular不亚于换到其他框架。这也导致了开发人员对这个框架失去了信心，使用Angular的想法在Fundbox乃至整个行业中大幅下降。

2. Angular逐渐发展成为一个可以帮助构建复杂系统的大框架，但对于构建启动快速变化的UI却没那么有用。React和Vue更加轻量，组件化意味着小巧，自主，封装，因此易于重复使用。如果我们从头开始开发新的基础架构（而不需要从现有基础架构迁移），我们也可以考虑使用Angular。但在我们的例子中，它不合适。

无论如何，我们正在重写我们应用程序的重要部分，这是我们学习新技术的绝佳机会。通过这种方式，我们可以拓宽知识面，丰富开发人员的经验。

React VS Vue

接下来留给我们选择的就只有React和Vue了，我们主要从以下几个方面对这两个框架进行对比：

• 学习曲线
  拥有丰富开发经验人员学习框架是否足够简单？
• 代码风格
  框架的代码和约定的可读性和直观性如何？
• 单个文件组件
  在框架中浏览和维护组件有多直观？
• 性能
  使用框架构建的应用程序的性能如何？
  框架的大小和运行内存占用有多大？
• 灵活性
  框架提供了多少功能？
  有多少功能是强制性的？
  定制框架有多容易？
• 工具
  框架可用的工具有哪些？
  框架有多少稳定的插件？
• 移动端支持
  框架是否支持除Web以外的更多应用程序？
  它是否提供了构建Native应用程序的方法？
• 社区
  框架的社区有多大？
  社区是团结还是支离破碎的？
• 成熟度
  框架有多成熟？
  它经过了多长时间的生产验证？
  它的未来发展路线是否清晰？
• 支持
  框架背后的团队有多大？
  是否有公司或组织负责该框架？
• 招聘人才
  聘请具有该框架使用经验的开发人员有多容易？

学习曲线

React

React官方文档提供了一些编写得很好的入门指南，并为新手提供了一个入门演练教程。具有一些前端框架经验的开发人员可以在几个小时内理解框架的核心原则。

官方的React文档很详细，但不像Vue的官方文档那样清晰有序。文档涵盖了必要的入门教程和核心概念等，但文档中缺少介绍框架的边界。随着项目变得更大，这些边界可能转换为痛点。

React不是一个包含所有功能的框架。它的核心理念是精益，只关注于核心部分，其他功能通过引用第三方解决方案解决。这增加了学习曲线的一些复杂性，因为它根据您在整个过程中对框架所做的选择而有所不同。

Vue

Vue可以直接在HTML页面中通过资源的方式加载，只需几分钟，整个库无需构建便可以使用了。这让我们可以在任何时候编写Vue应用程序。

编辑：感谢David Bismut指出React也有办法将其作为独立的JS文件添加到页面中，无需构建步骤：https//reactjs.org/docs/add-react-to-a-website.html

因为Vue借鉴了React和Angular的一些概念，开发人员更容易学习Vue。Vue的官方文档编写得非常好，甚至涵盖了开发Vue应用程序过程中偶然发现的问题。

Vue的定义比React更严格; 这也意味着它更具稳定性。值得注意的是，在Vue中，许多问题直接在其文档中得到解答，而不需要在其他地方搜索。

代码风格

React

React引入了一系列基于函数式编程的概念，简化了开发UI优先应用程序的过程。最值得注意的是：

1. JSX，这是一种用JavaScript编写HTML的方法。JSX是React作为函数式编程的强大推动者的补充，具有重大意义。
2. 它的组件生命周期提供了一种直观的方式来连接组件“生命”中的特定事件（创建，更新等）

Vue

作为一个比React和Angular更年轻的框架，Vue从各个方面吸收了很多好的理念，混合了函数式和面向对象编程(OOP)。

默认情况下，Vue的编码风格在某些方面与Angular有点相似，但也消除了Angular的大部分痛点。Vue将HTML，JS和CSS分开，就像Web开发人员已经习惯了多年的编码风格。但假如你喜欢JSX这种风格，它也可以替换使用。所以它不会强制改变你的代码风格。

Vue对组件生命周期的考虑比React更直观。一般来说，Vue的API比React更宽泛但更简单。

单个文件组件

React

使用JSX，React中的单个文件组件完全是作为JavaScript模块编写的，意味着React具有编写HTML，CSS和JavaScript的特定方式。

所有功能采用JavaScript编写，意味着更少的bug，因为它减轻了在组件内部创建动态HTML的负担。作为替代，使用JSX时我们可以使用原生JavaScript生成模板。

也就是说，React的特殊语法需要更多的学习和练习才能在React中编写组件。

Vue

Vue中的单个文件组件分为三个独立的部分：