30. Comparison with Other Frameworks（比较与其他框架）

这绝对是编写指南中最困难的一页，但我们确实认为这很重要。可能性是，你有问题想要解决，并且你已经使用另一个库来解决它们。你在这里是因为你想知道Vue是否能更好地解决你的具体问题。这就是我们希望为你回答的问题。

我们也努力避免偏见。作为核心团队，我们显然很喜欢Vue。有一些问题我们认为它比其他任何东西都解决得更好。如果我们不相信，我们就不会去做。我们确实希望公平和准确。在其他图书馆提供显着优势的地方，如React庞大的替代渲染器生态系统或Knockout的浏览器支持IE6，我们也尝试列出这些优点。

我们还希望您的帮助能够使本文档保持最新，因为JavaScript世界快速发展！如果您发现不准确或者看起来不太正确的事情，请通过开启问题告诉我们。

React

React和Vue有很多相似之处。他们两个：

• 利用虚拟DOM

• 提供反应性和可组合的视图组件

• 将重点放在核心库中，并考虑路由和由协同库处理的全局状态管理等问题

在范围上如此相似，我们已经把更多的时间用于微调这一比较。我们不仅要确保技术的准确性，还要保证平衡。我们指出React超越Vue的地方，例如他们的生态系统丰富多彩，并且他们的定制渲染器丰富。

有了这样的说法，对于一些React用户来说，比较会显得偏向于Vue，因为许多主题探讨的内容在某种程度上都是主观的。我们承认存在不同的技术品味，这种比较主要是为了概述为什么如果您的偏好恰好与我们的偏好相一致，Vue可能更适合您的理由。

React社区一直在帮助我们实现这一平衡，特别感谢React团队的Dan Abramov。他非常慷慨，他的时间和相当的专业知识可以帮助我们完善这份文件，直到我们对最终结果感到满意为止。

性能

React和Vue在最常见的用例中提供了可比较的性能，由于其虚拟DOM实现的重量较轻，Vue通常略微领先。如果您对数字感兴趣，可以查看关注原始渲染/更新性能的第三方基准。请注意，这不考虑复杂的组件结构，所以应该只被视为参考而不是判决。

优化工作

在React中，当一个组件的状态发生变化时，它触发整个组件子树的重新渲染，从该组件开始，以root身份开始。为了避免不必要的重新渲染子组件，您需要尽可能使用PureComponent或实现shouldComponentUpdate。您可能还需要使用不可变数据结构来使您的状态更改更加优化。但是，在某些情况下，您可能无法依赖这种优化，因为PureComponent/shouldComponentUpdate假设整个子树的渲染输出由当前组件的道具决定。如果情况并非如此，那么这种优化可能会导致DOM状态不一致。

在Vue中，组件的依赖关系会在其渲染过程中自动跟踪，因此系统准确知道哪些组件实际需要在状态更改时重新呈现。每个组件都可以被认为已经shouldComponentUpdate自动为您执行，没有嵌套的组件警告。

总体而言，这不需要开发人员对整个性能进行优化，并且可以让他们更专注于在扩展时构建应用程序本身。

HTML和CSS

在React中，所有内容都只是JavaScript。不仅是通过JSX表达的HTML结构，最近的趋势也倾向于将CSS管理放入JavaScript中。这种方法有其自身的好处，但也有各种各样的权衡，对每个开发者来说似乎都不值得。

Vue采用了经典的网络技术，并建立在它们之上。为了向您展示这意味着什么，我们将深入一些示例。

JSX vs 模板

在React中，所有组件都使用JSX在呈现函数中表示它们的UI，这是一种在JavaScript中工作的声明式XML类语法。

使用JSX渲染函数有以下几个优点：

• 您可以利用完整编程语言（JavaScript）的强大功能来构建您的视图。这包括临时变量，流程控制和直接引用范围内的JavaScript值。

• 用于JSX的工具支持（例如linting，类型检查，编辑器自动完成）在某些方面比Vue模板当前可用的更先进。

在Vue中，我们也有渲染功能，甚至支持JSX，因为有时候你确实需要这种功能。但是，作为默认体验，我们提供模板作为更简单的选择。任何有效的HTML也是一个有效的Vue模板，这导致了它自己的一些优点：

• 对于已经使用HTML的许多开发人员来说，模板在阅读和编写时感觉更自然。偏好本身可能有点主观，但如果它使开发人员更有成效，那么效益是客观的。

• 基于HTML的模板使逐步迁移现有应用程序以充分利用Vue的反应性功能变得更加容易。

• 它还使设计师和经验较少的开发人员能够更轻松地解析和贡献代码。

• 您甚至可以使用Pug（以前称为Jade）等预处理器来创作您的Vue模板。

有些人认为你需要学习一个额外的DSL（领域特定语言）才能编写模板 - 我们相信这种差异最多只是肤浅的。首先，JSX并不意味着用户不需要学习任何东西 - 它是纯JavaScript语言的附加语法，所以熟悉JavaScript的人可以很容易地学习，但是说它基本上是免费的，这是误导性的。同样，模板只是简单的HTML之上的附加语法，因此对于已经熟悉HTML的人来说学习成本非常低。使用DSL，我们还可以帮助用户以更少的代码（例如v-on修改器）完成更多工作。使用普通的JSX或渲染函数时，相同的任务可能涉及更多的代码。

在更高层次上，我们可以将组件分为两类：表示类和逻辑类。我们建议为演示组件使用模板并为逻辑部分渲染函数/ JSX。这些组件的百分比取决于您正在构建的应用程序的类型，但总的来说，我们发现表示方法更为常见。

组件范围的CSS

除非将组件分散到多个文件中（例如使用CSS模块），否则React中的CSS范围通常通过CSS-in-JS解决方案（例如，样式化组件，魅力和情感）完成。这引入了一种新的面向组件的样式范例，它与普通的CSS创作过程不同。此外，尽管在构建时将CSS解压缩到单个样式表中仍然很常见，但运行时仍需要包含在束中以使样式正常工作。虽然在构建样式时可以访问JavaScript的活力，但折衷常常会增加包的大小和运行时成本。

如果您是CSS-in-JS的粉丝，许多流行的CSS-in-JS库支持Vue（例如，style-components-vue和vue-emotion）。React和Vue之间的主要区别在于，Vue中的样式默认方法是通过style单个文件组件中更熟悉的标签。

单一文件组件可让您完全访问与组件代码其余部分相同的文件中的CSS。

<style scoped>
  @media (min-width: 250px) {
    .list-container:hover {
      background: orange;
    }
  }
</style>

可选scoped属性通过向data-v-21e5b78元素添加一个唯一属性（例如）并编译.list-container:hover为类似的东西，自动将此CSS范围限制到您的组件.list-container[data-v-21e5b78]:hover。

最后，Vue的单文件组件的样式非常灵活。通过vue-loader，您可以使用任何预处理器，后处理器甚至与CSS模块的深度集成- 所有这些都在<style>元素中。

规模

扩大

对于大型应用，Vue和React都提供强大的路由解决方案。React社区在状态管理解决方案（例如Flux / Redux）方面也非常具有创新性。这些状态管理模式甚至Redux本身都可以轻松集成到Vue应用程序中。事实上，Vue甚至将这个模型进一步推向Vuex，这是一个受Elm启发的状态管理解决方案，它集成了Vue，我们认为它提供了卓越的开发体验。

这些产品之间的另一个重要区别是，Vue的用于状态管理和路由（以及其他关注点）的配套库全部得到官方支持并与核心库保持同步。React反而选择将这些担忧留给社区，从而形成更加分散的生态系统。尽管如此，React的生态系统比Vue更加丰富。

最后，Vue提供了一个CLI项目生成器，可以使用您选择的构建系统（包括webpack，Browserify，甚至不需要构建系统）来开始一个新项目，这非常容易。React也在create-react-app这个领域取得了进展，但它目前有一些局限性：

• 它不允许在项目生成期间进行任何配置，而Vue的项目模板允许类似Yeoman的自定义。

• 它只提供一个假设您正在构建单页应用程序的模板，而Vue则提供各种用于各种目的和构建系统的模板。

• 它不能从用户构建的模板生成项目，这对于具有预先建立的约定的企业环境特别有用。

需要注意的是，其中许多限制是由create-react-app团队制定的有意设计决策，并且他们确实有其优势。例如，只要您的项目需求非常简单，并且您永远不需要“弹出”来自定义构建过程，就可以将其更新为依赖项。你可以在这里阅读更多不同的哲学。

缩小

React以其陡峭的学习曲线而闻名。在真正开始之前，您需要了解JSX和ES2015 +，因为许多示例都使用React的类语法。您还必须了解构建系统，因为虽然技术上可以使用Babel Standalone在浏览器中实时编译代码，但它并不适合生产。

虽然Vue的规模与React一样好，如果不比React好，它也和jQuery一样好。这是正确的 - 您只需将一个脚本标记放入页面即可：

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

然后，您就可以开始编写Vue代码，甚至可以将缩小版本发布到生产环境中，而不会感到内疚或不必担心性能问题。

由于您不需要了解JSX，ES2015或构建系统以开始使用Vue，因此通常需要开发人员不到一天的时间阅读该指南以学习足够的知识来构建非平凡的应用程序。

本机渲染

通过React Native，您可以使用相同的React组件模型为iOS和Android编写原生呈现的应用程序。这非常棒，因为作为一名开发人员，您可以跨多个平台应用您对框架的了解。在这方面，Vue与Weex进行了正式合作，Weex是由阿里巴巴集团开发的一个跨平台UI框架，它使用Vue作为其JavaScript框架运行时。这意味着对于Weex，您可以使用相同的Vue组件语法来创建不仅可以在浏览器中呈现的组件，而且还可以在iOS和Android上本地呈现组件！

目前，Weex仍处于积极的发展阶段，并不像React Native那样成熟和经过战斗考验，但其发展受全球最大电子商务企业的生产需求驱动，而Vue团队也将积极与Weex团队合作，确保Vue开发者顺利体验。

Vue开发人员很快将拥有的另一个选择是NativeScript，通过社区驱动的插件。

随着MobX

MobX在React社区非常流行，它实际上使用了与Vue几乎相同的反应性系统。在一定程度上，React + MobX工作流程可以被认为是一个更详细的Vue，所以如果您使用该组合并享受它，那么跳入Vue可能是下一个合理的步骤。

AngularJS（Angular 1）

Vue的一些语法看起来与AngularJS非常相似（如v-ifvs ng-if）。这是因为AngularJS有很多东西是正确的，这些都是Vue在开发早期的启发。然而，AngularJS也带来了很多痛苦，Vue试图提供重大改进。

复杂

在API和设计方面，Vue比AngularJS简单得多。足够学习构建非平凡应用程序通常需要不到一天的时间，这对于AngularJS来说并非如此。

灵活性和模块化

AngularJS对应用程序应该如何构建有强烈的见解，而Vue是一个更灵活的模块化解决方案。虽然这使得Vue更适合于各种各样的项目，但我们也认识到，有时为您做出一些决策很有用，以便您可以开始编码。

这就是为什么我们提供一个webpack模板，可以在几分钟内完成设置，同时还可以访问高级功能，例如热模块重新加载，linting，CSS提取等等。

数据绑定

AngularJS在范围之间使用双向绑定，而Vue在组件之间实施单向数据流。这使得数据流在非平凡的应用程序中更容易推理。

指令与组件

Vue在指令和组件之间有更清晰的分离。指令仅用于封装DOM操作，而组件是具有自己的视图和数据逻辑的独立单元。在AngularJS中，两者之间存在很多混淆。

性能

Vue具有更好的性能，并且更容易优化，因为它不使用脏检查。当有很多观察者时，AngularJS变得很慢，因为每当示波器中的任何事情发生变化时，所有这些观察者都需要重新评估。另外，如果某个观察者触发另一个更新，则摘要循环可能必须多次运行以“稳定”。AngularJS用户通常不得不求助于深奥的技术来避开摘要循环，在某些情况下，无法通过许多观察者来优化范围。

Vue完全不会受到这种影响，因为它使用透明的依赖跟踪观察系统和异步队列 - 所有更改独立触发，除非它们具有明确的依赖关系。

有趣的是，Angular和Vue如何解决这些AngularJS问题有很多相似之处。

Angular（以前称为Angular 2）

我们为新的Angular有一个独立的部分，因为它确实是一个与AngularJS完全不同的框架。例如，它具有一流的组件系统，许多实现细节已被完全重写，并且API也发生了巨大变化。

打字稿

角度本质上需要使用TypeScript，因为几乎所有的文档和学习资源都是基于TypeScript的。TypeScript有其优点 - 静态类型检查对于大规模应用程序非常有用，对于Java和C＃背景的开发人员来说，它可以大大提高生产力。

但是，并不是每个人都想使用TypeScript。在许多较小规模的用例中，引入类型系统可能会导致比生产力增加更多的开销。在那些情况下，你最好用Vue来代替，因为使用Angular而不用TypeScript可能会有挑战性。

最后，尽管没有像Angular那样与TypeScript深度整合，但Vue还为那些希望使用TypeScript和Vue的人提供官方的类型和官方装饰器。我们还积极与Microsoft的TypeScript和VSCode团队合作，以改善Vue + TS用户的TS / IDE体验。

尺寸和性能

在性能方面，这两个框架都非常快速，而且没有足够的数据从现实世界的用例中做出判断。然而，如果你决定看到一些数字，根据这个第三方基准，Vue 2.0似乎领先于Angular 。

Angular的最新版本，AOT编译和树状结构，能够大幅缩小它的尺寸。然而，包含Vuex + Vue路由器的全功能Vue 2项目（约30KB gzip）仍然比由angular-cli（约130KB gzipped）生成的开箱即用的AOT编译应用程序轻得多。

灵活性

Vue比Angular少得多，为各种构建系统提供官方支持，而且对构建应用程序的方式没有限制。许多开发者喜欢这种自由，而有些人则更喜欢只有一种正确的方式来构建任何应用程序

学习曲线

要开始使用Vue，只需熟悉HTML和ES5 JavaScript（即纯JavaScript）。借助这些基本技能，您可以在阅读指南后不到一天的时间内开始构建非平凡的应用程序。

Angular的学习曲线更陡。框架的API表面是巨大的，作为用户，在获得生产力之前，您需要熟悉更多的概念。Angular的复杂性很大程度上归功于其针对大型复杂应用程序的设计目标 - 但这对于经验较少的开发人员来说确实使框架变得更加困难。

Ember

Ember是一个全功能的框架，旨在获得高度评价。它提供了很多既定的约定，一旦你对它们熟悉了，它可以使你非常有成效。但是，这也意味着学习曲线很高，灵活性受损。当你试图在一个自发的框架和一个图书馆之间选择一组松散耦合的工具时，这是一个折衷。后者给你更多的自由，但也需要你做出更多的架构决定。

也就是说，它可能会更好地比较Vue核心和Ember的模板和对象模型图层：

• Vue对普通的JavaScript对象和全自动计算属性提供了不显眼的反应。在Ember中，您需要将所有东西都包含在Ember对象中，并手动声明计算属性的依赖关系。

• Vue的模板语法利用了JavaScript表达式的全部功能，而Handlebars的表达式和辅助语法故意相当有限。

• 性能方面，Vue公司优于灰烬由一个公平的余量，即使在灰烬2.x的最新微光引擎更新后 Vue会自动批量更新，而在Ember中，您需要在性能危急的情况下手动管理运行循环.KnockoutKnockout是MVVM和依赖关系跟踪空间的先驱，其反应性系统与Vue非常相似。它的浏览器支持考虑到它所做的一切，支持IE6也是非常令人印象深刻的！另一方面，Vue只支持IE9 +。然而，在过去的一段时间里，Knockout的开发速度已经放缓，并开始显示其年龄。例如，它的组件系统缺乏一整套生命周期钩子，尽管这是一个非常常见的用例，但与Vue相比，将子件传递给组件的接口感觉有点笨拙。在API设计中似乎也存在哲学差异，如果您好奇，可以通过每个人如何处理创建简单的待办事项列表来演示。这绝对有些主观，但许多人认为Vue的API不那么复杂，结构也更好.PolymerPolymer是Google赞助的另一个项目，实际上也是Vue的灵感来源。Vue的组件可以松散地与Polymer的自定义元素进行比较，两者都提供了非常相似的开发风格。最大的区别是Polymer基于最新的Web组件功能构建，并且需要使用不重复的polyfills（本质上不支持这些功能的浏览器）才能正常工作（性能下降）。相比之下，Vue没有任何依赖性或多填充到IE9。在Polymer 1.0中，该团队还使其数据绑定系统非常有限，以补偿性能。例如，聚合物模板中支持的唯一表达式是布尔否定和单一方法调用。它的计算属性实现也不是很灵活.Polymer自定义元素是用HTML文件编写的，它限制了普通的JavaScript / CSS（以及当今浏览器支持的语言特性）。相比之下，Vue的单一文件组件允许您轻松使用ES2015 +和所需的任何CSS预处理器。当部署到生产环境时，Polymer建议使用HTML Imports（它假设实现该规范的浏览器和HTTP / 2支持）实时加载所有内容在服务器和客户端上。根据您的目标受众和部署环境，这可能也可能不可行。在不希望出现的情况下，您将不得不使用称为Vulcanizer的特殊工具来捆绑聚合物元素。在这方面，Vue可以将其异步组件功能与webpack的代码拆分功能结合起来，轻松拆分应用程序包的部分以便延迟加载。这可确保与旧版浏览器的兼容性，同时保持良好的应用加载性能。将Vue与Web组件规范（如自定义元素和Shadow DOM样式封装）进行更深入的集成也是完全可行的 - 但此时我们仍在等待规范成熟并在所有主流浏览器中广泛实施，然后再作出任何认真的承诺.RiotRiot 3.0提供了一个类似的基于组件的开发模型（在Riot中称为“标签”），并具有最小巧且设计精美的API。Riot和Vue可能在设计哲学上有很多共同之处。然而，尽管比Riot重一点，但Vue确实提供了一些显着的优势：

• 更好的性能。Riot 遍历DOM树而不是使用虚拟DOM，因此遇到与AngularJS相同的性能问题。

• 更成熟的工具支持。Vue为webpack和Browserify提供官方支持，而Riot依靠社区支持构建系统集成。