我们必须承认，我们在这些框架方面有着极不平等的经验。然而，我们将尽量保持公正，并弄清楚React何时可能不是最佳选择，但首先，简短介绍：

• React是Facebook维护的最流行的框架。所有的酷孩子，以及经验丰富的工程师都喜欢它。
  
• 我们有Angular感谢谷歌。它是企业中最古老、最著名的。
  
• Evan You从他以前在Google的工作经验中提取出他喜欢AngularJS的部分，从而创建了轻量级Vue。这是亚洲最流行的框架。
  

框架设计

Vue和Angular共享类似的设计，尽管Angular是一个复杂的平台，而不仅仅是一个小库。另一方面，React具有独特的设计，具有单向数据绑定和虚拟DOM。

React设计原则

React是基于可组合组件的思想构建的。它们是隔离的，在大多数情况下，只公开props 接口。它使团队协作更加容易，因为不同的人可以创建各种协同工作的组件。对组件进行更改也是一件轻而易举的事，而且这很少会导致整个代码库的更改链。

在React中，组件不会直接呈现给Dom。render方法返回需要呈现的内容的描述，React有一种快速而聪明的方法将其应用于DOM。

这个框架是关于组件层次结构的单向数据流。子组件不知道它们的父组件，只接收来自它们的props 。将函数作为属性传递是修改父组件状态的常见做法。它使得所有的东西都是松散耦合的、模块化的、快速的。

Angular 是为了企业

Angular更像是一个使用HTML和TypeScript构建应用程序的平台。它由不同的TypeScript库组成，可以导入到项目中，比如路由或ajax调用。

Angular应用程序总是有一个支持引导的根模块，通常有一堆特性模块。NgModules是将相关代码收集到功能组件中的基本构建块。

组件为屏幕元素定义视图，并使用与视图不直接相关的特定功能的服务。它利用依赖注入使所有东西松散耦合和模块化。

应用程序代码广泛地使用decorator为Angular提供额外的元数据。

对于视图，它有自己的模板语言，带有指令和绑定标记，可以根据数据动态呈现HTML。还有一个事件绑定可以让你的应用程序响应用户输入。与react不同，数据流是双向的。

Vue,两者兼而有之

Vue试图用最简单的API提供可组合视图组件和反应式(reactive )数据绑定的好处。Vue有一篇文章从其他框架的角度将其与其他框架进行了比较，值得一读，尤其是如果您已经熟悉其他两种框架之一的话。

Vue不是Angular那样的平台，而是像React一样的接口框架。与Angular一样，它支持双向数据绑定，但组件之间的单向父子数据流是默认设置。它还有一个独特的模板语言，并且不像React那样使用虚拟DOM。

Vue中的组件与Web组件规范中的自定义元素非常相似。他们故意按照规范对语法进行建模。但是，Vue组件在每个浏览器中都受支持，具有跨组件数据流、自定义事件通信和其他基本功能。

框架的优势

每个框架都有它最好的部分。React使开发变得轻而易举，Angular主要专注于企业，而Vue则是最轻量级的。

React优点

如果你问我们React最喜欢什么，那应该是JSX（TypeScript是TSX）。它是JavaScript的语法扩展，可以为组件编写类似HTML的呈现代码：

function Hello({ name }) { return <div>Hello {name}</div>; }

如果没有JSX，编写React代码会非常痛苦：

function Hello({ name }) { return React.createElement("div", null, `Hello ${name}`); }

上面的JSX在幕后被翻译成了非常相似的JavaScript。想象一下用它编写复杂的组件层次结构。你可以玩一下the online Babel compiler 来获得这个想法。

React团队非常关注API的稳定性。对于像Facebook、Twitter和Airbnb这样在生产中使用React的大公司来说，这一点至关重要。这些api与最初的版本相比没有太大变化。当他们决定删除某些内容时，他们首先将其标记为已弃用，这将触发linter和debug生成警告。

作为一个视图库，react通过互操作性得到了了巨大的好处。您可以快速将其放入现有项目中，并仅将其用于组件的一个子集。

对于性能，它使用“拉动”方法。与其他在新数据可用时执行计算的框架不同，React可以安排生命周期方法来延迟应用更改。

开发经验是React团队的首要任务。它们维护有用的React DevTools，并尝试使框架抛出的警告真正有用。

在React 16.8中引入React钩子使得几乎整个应用程序都可以使用短功能组件。函数式风格使代码更易于编写、阅读和理解。

除了HTML，React还支持Web组件和呈现SVG。它与渲染器无关，可以在浏览器内部工作，也可以在Node.js处理和输出HTML流，甚至在移动设备上使用React Native。

你可以在他们的“设计原则”(“Design Principles”）一文中了解更多关于它们的好处。

Angular 长处

作为一个平台，Angular的所有基础知识都是现成的。因此，应用程序通常具有更好的一致性、更高的代码质量和更高的安全性。您不必为常见任务处理不熟悉的第三方软件包。

默认情况下，Angular附带TypeScript。强类型语言有许多优点，比如出现错误的机会更少、工具更好、重构功能更强大以及总体上可维护性更好。我们也推荐它用于React项目。

与其他鼓励自由的框架不同，Angular通常有一种建议的做事方式。对于新开发人员来说，加入不熟悉的项目更为自然，因为每个应用程序的结构几乎都是一样的。它还使得维护大型代码库更便宜、更高效。

与其他框架中的组件类似，模块允许代码重用和由不同的人甚至团队进行并行开发。Angular社区还提供了带有可重用组件的预制模块。

Vue灵活性

轻量级和简单是Vue设计的核心原则之一。在所有三个框架中，它的包大小最小。Vue代码非常简单易懂。这可能是它受欢迎的主要原因。

与React一样，您可以轻松地将Vue添加到现有项目中，并开始将其用于某些部分。与React不同的是，Vue模板语法类似于HTML，因此转换现有代码更加方便。顺便说一下，它还支持JSX语法。

Vue的核心和最受欢迎的库都有公共CDN。您不必设置复杂的构建过程来使用它，添加头脚本（如jQuery）应该可以让您快速入门。

Vue覆盖了MVVM架构模式的ViewModel层。除了呈现HTML视图外，它还具有双向数据绑定，以使UI中的更改与数据同步，反之亦然。它比React的单向绑定直观得多，使它更容易在静态网站中添加动态功能。

它受到了另外两个框架的启发，并试图从这两个框架中获取最好的部分。组件来自React。指令以及双向数据绑定都是从Angular中借用的。它不仅仅是像React这样的UI库，也不是Angular这样的成熟平台。Vue拥有一个很好的平衡特性，这些特性都是现成的，而且没有固执己见，提供了广泛的选择自由。

每个框架的缺点

本文中涉及的所有框架都是健壮的，经过许多公司的生产测试，没有明显的缺点。但是，在为下一个项目选择框架时，需要记住一些事情。

React 缺点

React不喜欢第三方代码弄乱DOM。在React中提供具有根DOM元素的外部库很容易，并且只处理其生命周期。这就是流行的react-leaflet库如何用react接口包装纯JavaScript单张库。

单向的数据流是一个巨大的好处，在没有经验的人身上会造成很多伤害。清楚的理解是正确使用它的关键。我们认为React与其他框架有很大的不同，因此它需要自己的思考方式。

Angular 缺陷

Angular是一个复杂的平台，具有陡峭的学习曲线。应用程序代码冗长而复杂，这使得它不适合许多开发速度至关重要的敏捷项目。它是为企业级应用程序而创建的，因此可维护性是他们的首要任务。

包的大小通常比另外两个包大得多，尽管它取决于包含的库。再加上缺乏对服务器端渲染的支持，这使得Angular应用程序远不是SEO友好的。有点奇怪，考虑到它的创建者，谷歌是最大的搜索公司。

Angular的受欢迎程度正在慢慢下降，社区开始转向其他框架。许多开发人员认为这个已经有十年历史的框架是一种遗留技术，并且不愿意在基于它的项目上工作。

Vue缺点

Vue依赖于相当复杂的机制来实现其双向反应性(reactivity)。每个开发人员都应该意识到Vue无法检测到的这些情况：

• 对象的属性添加和删除
  
• 使用相应属性修改数组长度
  
• 按索引直接分配数组元素
  

JavaScript本身的局限性导致了这些问题，Vue团队对此无能为力。它们在反应性指南中有完整的记录。

作为最年轻的框架，Vue缺乏经验丰富的开发人员，学习资源有限。不过，生态系统本身相当广泛。

尽管它的受欢迎程度有一个强劲的上升趋势，但在撰写本文时，很少有大型项目是基于Vue构建的。对于应用程序的其余部分，没有多少最佳实践和经过验证的库。它引入了一些风险因素，在选择Vue进行更实质性的项目时需要考虑。

性能

所有的基准都来自Stefan Krause的综合JS框架基准测试。您可以检查每个框架测试的源代码，甚至可以在本地计算机上运行这些基准测试。所有的说明以及每个测试的详细解释都在存储库中。

Dom操作

DOM操作测试在应用程序完全加载和预热后测量UI性能。

我们这里没有明确的赢家。Vue可能会使用独特的性能优化来加快交换行的速度。另一方面，Angular和React在highlighting rows测试中的性能都要优于React。

启动时间

这些测试代表了Google在访问应用程序时推荐的高质量用户体验的“Web关键点”指标。

Vue凭借其轻量级的设计和最小的捆绑包大小击败了这里的所有人。React排在第二，只输了几分。角度，感谢它的束大小和复杂的引导是最后一个明显的区别。

内存分配

结果与启动时间试验有很强的相关性。Vue排在第一位，反应不远，Angular由于其大小和抽象性而占据了大部分内存。

人气

根据googletrends，React仍然是最流行的框架。它有一个活跃的社区和最广泛的第三方npm包集合。

然而，在他们的存储库获得的星数量上，Vue已经克服了这一点。

如果我们看看中国，情况就不同了。中国是Vue的发源地，在附近的亚洲国家也很受欢迎。由于防火墙的存在，中国开发者无法访问谷歌和其他框架上的大部分资源。语言障碍也起着重要作用。

学习曲线

Vue是最容易学的，不用担心。它的模板语法与plain html非常相似。您可以用HTML、Javascript或JSX编写模板。双向响应非常简单。i

整个框架很小，设计中融入了简洁性。

反应其次。JSX也类似于HTML，但有一些区别，比如类名和camelCase命名约定。单向数据流和不变状态是最难理解的部分。但一旦你得到它，其他一切都很容易。

Angular的学习曲线要陡得多，因为它是这三个框架中最复杂的。TypeScript和RxJS对于Angular开发是必需的，因此开发人员也必须了解它们。虽然TypeScript构建在JavaScript之上，而且非常容易学习，但RxJS确实需要一些努力才能掌握。

摘要

荣誉提及Preact

PPreact是一个快速的api兼容React的替代品，具有令人惊叹的3Kb包大小。

它与React基本上是生态系统兼容的，这意味着为React设计的第三方npm包中的组件也应该在Preact中工作。在关于从React切换的指南中，它们涵盖了许多常见的迁移问题。

作为最小的UI框架之一，它非常适合于可嵌入的小部件和其他代码，其中bundle的大小至关重要。拥有React经验的开发人员甚至不必牺牲生产力，因为它离它的老大哥太近了。

结论

对于一个新项目来说，这三个框架中的任何一个都不会完全出错。明智的做法是将你的决定主要建立在你的团队现有的专业知识之上。

• 当涉及到小部件和其他可嵌入的UI组件时，Preact是最好的。
  
• React是一个很好的全能者。由于单向数据流，应用程序的逻辑始终保持清晰。组件提供了高级别的代码重用和较低的更改成本。它对小项目没有问题，而且，当与TypeScript一起使用时，对于大中型项目也非常适用。
  
• 对于Web设计者来说，Vue是jQuery的最佳替代品。它的功能远不止于此，我们还建议将其用于除企业项目之外的任何项目。由于简单和高效，它对于MVP开发来说一定是很棒的，尽管我们还没有尝试过。
  
• 随着越来越多的公司迁移到Vue和React，Angular甚至在企业利基市场也失去了主导地位。现在我们不提倡从头开始学习，但是如果你有合理的理由，开始一个新的角度项目并不是一个大错误。然而，它的大量冗长对开发生产力有很大的伤害。
  

我们重视React设计决策的好处及其广泛的生态系统。我们对Vue没有太多的经验，但是如果它对项目更有意义的话，我们会考虑使用它。今天，我们不能向我们的客户推荐好的老Angular，因为它继续失去人气，我们担心很难很快找到好的Angular开发人员。