Close
升级到 Vue 3 | Vue 2 EOL

指南

与其他框架比较

这绝对是指南中最难写的页面，但我们认为它很重要。很有可能，你遇到过一些问题，你尝试过用其他库来解决它们。你来到这里是因为你想知道 Vue 是否能更好地解决你的特定问题。这就是我们希望为你解答的。

我们也尽力避免偏见。作为核心团队，我们显然非常喜欢 Vue。我们认为它在解决某些问题方面比其他任何东西都更好。如果我们不相信这一点，我们就不会继续开发它。但我们也希望公平和准确。如果其他库提供了显著的优势，例如 React 的庞大生态系统和丰富的自定义渲染器，或 Knockout 对 IE6 及更高版本的浏览器支持，我们也会尝试列出这些优势。

我们也希望你帮助我们保持这份文档的最新，因为 JavaScript 世界发展很快！如果你发现任何不准确之处或看起来不太对的地方，请通过 打开一个问题 告知我们。

React

React 和 Vue 有很多相似之处。它们都

由于范围如此相似，我们投入了比其他任何比较都多的时间来微调这次比较。我们不仅要确保技术准确性，还要确保平衡。我们指出了 React 在哪些方面胜过 Vue，例如其生态系统的丰富性和自定义渲染器的丰富性。

话虽如此，不可避免的是，对于一些 React 用户来说，这种比较会显得偏向 Vue，因为许多探讨的主题在某种程度上是主观的。我们承认技术品味存在差异，而这次比较主要旨在概述 Vue 可能更适合你的原因，前提是你的偏好与我们一致。

以下部分中的一些内容也可能略微过时，因为 React 16+ 进行了最近的更新，我们计划在不久的将来与 React 社区合作改进这部分内容。

运行时性能

React 和 Vue 都非常快，而且速度相似，因此速度不太可能成为选择它们之间的决定性因素。不过，对于具体的指标，请查看这个 第三方基准测试，它侧重于使用非常简单的组件树的原始渲染/更新性能。

优化工作

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

在 Vue 中，组件的依赖项在渲染期间会自动跟踪，因此系统精确地知道哪些组件在状态发生变化时实际上需要重新渲染。可以认为每个组件都自动实现了 shouldComponentUpdate，而没有嵌套组件的注意事项。

总的来说，这消除了开发人员需要进行一大类性能优化的负担，使他们能够更多地专注于构建应用程序本身，因为它会扩展。

HTML & CSS

在 React 中，一切都是 JavaScript。不仅 HTML 结构通过 JSX 表达，最近的趋势也倾向于将 CSS 管理也放在 JavaScript 中。这种方法有其自身的优势，但也带来了各种权衡，对于每个开发人员来说可能并不值得。

Vue 拥抱经典的 Web 技术，并在其基础上构建。为了向你展示这意味着什么，我们将深入探讨一些示例。

JSX vs 模板

在 React 中，所有组件都使用 JSX 在渲染函数中表达其 UI，JSX 是一种声明性的 XML 类语法，可以在 JavaScript 中使用。

使用 JSX 的渲染函数有一些优势

在 Vue 中，我们也有 渲染函数，甚至 支持 JSX，因为有时你确实需要这种力量。但是，作为默认体验，我们提供模板作为更简单的替代方案。任何有效的 HTML 也是有效的 Vue 模板，这带来了它自身的优势

有些人认为你需要学习额外的 DSL（领域特定语言）才能编写模板 - 我们认为这种差异充其量是肤浅的。首先，JSX 并不意味着用户不需要学习任何东西 - 它是在纯 JavaScript 之上的额外语法，因此对于熟悉 JavaScript 的人来说很容易学习，但说它本质上是免费的则是误导。类似地，模板只是在纯 HTML 之上的额外语法，因此对于已经熟悉 HTML 的人来说学习成本非常低。使用 DSL，我们还可以帮助用户用更少的代码做更多的事情（例如 v-on 修饰符）。使用纯 JSX 或渲染函数时，相同的任务可能需要更多代码。

在更高层次上，我们可以将组件分为两类：表现型组件和逻辑型组件。我们建议对表现型组件使用模板，对逻辑型组件使用渲染函数/JSX。这些组件的比例取决于你正在构建的应用程序类型，但总的来说，我们发现表现型组件要普遍得多。

组件范围的 CSS

除非你将组件分散到多个文件中（例如使用 CSS 模块），否则在 React 中，范围 CSS 通常是通过 CSS-in-JS 解决方案（例如 styled-components 和 emotion）来完成的。这引入了一种新的面向组件的样式范式，它不同于正常的 CSS 编写过程。此外，虽然支持在构建时将 CSS 提取到单个样式表中，但通常需要在捆绑包中包含一个运行时才能使样式正常工作。虽然你可以在构建样式时访问 JavaScript 的动态性，但权衡通常是捆绑包大小增加和运行时成本增加。

如果您是 CSS-in-JS 的粉丝，许多流行的 CSS-in-JS 库都支持 Vue（例如 styled-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 编译为类似 .list-container[data-v-21e5b78]:hover 的内容，自动将此 CSS 范围限定到您的组件。

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

规模

扩展

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

这些产品之间的另一个重要区别是，Vue 的状态管理和路由配套库（以及 其他问题）都得到了官方支持，并与核心库保持同步更新。React 选择将这些问题留给社区，从而创建了一个更加分散的生态系统。尽管 React 更受欢迎，但它的生态系统比 Vue 的生态系统要丰富得多。

最后，Vue 提供了一个 CLI 项目生成器，它通过提供一个交互式的项目脚手架向导，使创建新项目变得非常容易。您甚至可以使用它来 立即原型化 组件。React 在这方面也取得了进展，推出了 create-react-app，但它目前有一些限制。

需要注意的是，这些限制中的许多都是 create-react-app 团队有意做出的设计决策，它们确实有自己的优势。例如，只要您的项目的需要非常简单，并且您永远不需要“弹出”来定制您的构建过程，您就可以将其作为依赖项进行更新。您可以阅读更多关于 不同哲学的介绍。

缩减

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

虽然 Vue 的扩展性与 React 一样好，但它的缩减性也与 jQuery 一样好。没错 - 要开始使用，您只需将一个脚本标签放到页面中即可。

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

然后您可以开始编写 Vue 代码，甚至将压缩后的版本发布到生产环境，而无需感到内疚或担心性能问题。

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

原生渲染

React Native 使您能够使用相同的 React 组件模型为 iOS 和 Android 编写原生渲染的应用程序。这很棒，因为作为开发人员，您可以在多个平台上应用您对框架的了解。在这方面，Vue 与 Weex 有官方合作，Weex 是由阿里巴巴集团创建并由 Apache 软件基金会 (ASF) 孵化的跨平台 UI 框架。Weex 允许您使用相同的 Vue 组件语法来编写组件，这些组件不仅可以在浏览器中渲染，还可以原生渲染在 iOS 和 Android 上！

目前，Weex 仍在积极开发中，还没有像 React Native 那样成熟和经过实战检验，但它的开发是由世界上最大的电子商务企业的生产需求驱动的，Vue 团队也将积极与 Weex 团队合作，以确保 Vue 开发人员获得流畅的体验。

另一个选择是 NativeScript-Vue，一个 NativeScript 插件，用于使用 Vue.js 构建真正的原生应用程序。

使用 MobX

MobX 在 React 社区中变得非常流行，它实际上使用与 Vue 几乎相同的反应式系统。在一定程度上，React + MobX 工作流程可以被认为是更详细的 Vue，因此，如果您正在使用这种组合并享受它，那么转向 Vue 可能是下一步的逻辑步骤。

Preact 和其他类似 React 的库

类似 React 的库通常试图尽可能多地与 React 共享其 API 和生态系统。因此，上面大多数比较也适用于它们。主要区别通常是生态系统规模较小，通常比 React 小得多。由于这些库无法与 React 生态系统中的所有内容完全兼容，因此某些工具和配套库可能无法使用。或者，即使它们看起来可以工作，它们也可能随时中断，除非您的特定类似 React 的库得到官方支持，与 React 相当。

AngularJS (Angular 1)

Vue 的一些语法看起来与 AngularJS 非常相似（例如 v-if 与 ng-if）。这是因为 AngularJS 做了很多正确的事情，这些事情在 Vue 的早期开发中就成为了它的灵感来源。然而，AngularJS 也存在许多弊端，而 Vue 试图提供显著的改进。

复杂性

Vue 比 AngularJS 简单得多，无论是在 API 方面还是在设计方面。学习足够的知识来构建非平凡的应用程序通常只需要不到一天的时间，而 AngularJS 则并非如此。

灵活性和模块化

AngularJS 对应用程序的结构方式有强烈的意见，而 Vue 则是一个更灵活、更模块化的解决方案。虽然这使得 Vue 能够适应各种项目，但我们也认识到，有时为我们做出一些决定是有用的，这样我们就可以直接开始编码。

这就是我们提供一个完整的系统来进行快速 Vue.js 开发的原因。 Vue CLI 旨在成为 Vue 生态系统的标准工具基线。它确保各种构建工具与合理的默认值一起顺利工作，这样您就可以专注于编写应用程序，而不是花费数小时处理配置。同时，它仍然提供灵活的选项来根据特定需求调整每个工具的配置。

数据绑定

AngularJS 在作用域之间使用双向绑定，而 Vue 在组件之间强制执行单向数据流。这使得在非平凡的应用程序中更容易理解数据的流动。

指令与组件

Vue 在指令和组件之间有更清晰的区分。指令旨在仅封装 DOM 操作，而组件是自包含的单元，具有自己的视图和数据逻辑。在 AngularJS 中，指令无所不能，组件只是指令的一种特殊类型。

运行时性能

Vue 拥有更好的性能，并且更容易优化，因为它不使用脏检查。AngularJS 在存在大量观察者时会变得很慢，因为每次作用域中的任何内容发生变化时，所有这些观察者都需要重新评估。此外，如果某个观察者触发了另一个更新，则摘要周期可能需要运行多次才能“稳定”。AngularJS 用户经常不得不求助于深奥的技术来绕过摘要周期，在某些情况下，无法优化具有许多观察者的作用域。

Vue 根本不会遇到这个问题，因为它使用了一个透明的依赖项跟踪观察系统，并带有异步队列 - 所有更改都会独立触发，除非它们具有显式的依赖关系。

有趣的是，Angular 和 Vue 在解决这些 AngularJS 问题的方式上有很多相似之处。

Angular（以前称为 Angular 2）

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

TypeScript

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

但是，并非所有人都想使用 TypeScript。在许多小型用例中，引入类型系统可能会导致比生产力提升更多的开销。在这种情况下，最好使用 Vue，因为在没有 TypeScript 的情况下使用 Angular 会很困难。

最后，虽然 Vue 与 TypeScript 的集成不像 Angular 那样深入，但 Vue 也为希望使用 TypeScript 与 Vue 的用户提供了 官方类型定义 和 官方装饰器。我们还积极与微软的 TypeScript 和 VSCode 团队合作，以改善 Vue + TS 用户的 TS/IDE 体验。

运行时性能

这两个框架都非常快，在基准测试中的指标非常相似。您可以 浏览特定指标 以进行更细粒度的比较，但速度不太可能成为决定性因素。

大小

使用 AOT 编译 和 树摇 的最新版本的 Angular 已经能够将大小大幅降低。但是，一个包含 Vuex + Vue Router 的功能齐全的 Vue 2 项目（约 30KB 压缩后）仍然比由 angular-cli 生成的开箱即用的 AOT 编译应用程序（约 65KB 压缩后）轻得多。

灵活性

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

学习曲线

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

Angular 的学习曲线要陡峭得多。该框架的 API 表面非常庞大，作为用户，您需要熟悉更多概念才能提高生产力。Angular 的复杂性很大程度上是由于其设计目标是仅针对大型复杂应用程序 - 但这也使得该框架对于经验不足的开发人员来说更难上手。

Ember

Ember 是一个功能齐全的框架，旨在高度 opinionated。它提供了许多既定的约定，一旦您足够熟悉它们，它就可以让您非常高效。但是，这也意味着学习曲线很高，灵活性受到影响。当您尝试在 opinionated 框架和具有松散耦合的一组协同工作的工具的库之间进行选择时，这是一个权衡。后者为您提供了更多自由，但也要求您做出更多架构决策。

也就是说，它可能在 Vue 核心和 Ember 的 模板 和 对象模型 层之间进行更好的比较。

Knockout

Knockout 是 MVVM 和依赖项跟踪领域的先驱，其反应性系统与 Vue 的非常相似。它的 浏览器支持 也非常令人印象深刻，考虑到它所做的一切，它支持回溯到 IE6！另一方面，Vue 仅支持 IE9+。

随着时间的推移，Knockout 的开发速度放缓，它开始显露出一些老旧的迹象。例如，它的组件系统缺少一整套生命周期钩子，虽然这是一个非常常见的用例，但与 Vue 的 相比，将子级传递给组件的接口感觉有点笨拙。

在 API 设计中似乎也存在哲学差异，如果您好奇，可以通过每个框架如何处理 简单待办事项列表 的创建来证明这一点。这绝对有点主观，但许多人认为 Vue 的 API менее сложен и лучше структурирован.

Polymer

Polymer 是另一个由 Google 赞助的项目，实际上也是 Vue 的灵感来源。Vue 的组件可以与 Polymer 的自定义元素进行松散比较，两者都提供非常相似的开发风格。最大的区别是 Polymer 是建立在最新的 Web Components 功能之上的，并且需要非平凡的 polyfill 才能在不支持这些功能的浏览器中工作（性能下降）。相比之下，Vue 在 IE9 及更高版本中无需任何依赖项或 polyfill 即可工作。

在 Polymer 中，该团队还使其数据绑定系统非常有限，以弥补性能。例如，Polymer 模板中支持的唯一表达式是布尔否定和单个方法调用。它的计算属性实现也不太灵活。

Riot

Riot 3.0 提供了类似的基于组件的开发模型（在 Riot 中称为“标签”），具有最小且设计精美的 API。Riot 和 Vue 可能在设计理念上有很多共同点。但是，尽管 Riot 比 Riot 重一些，但 Vue 确实提供了一些显著的优势。

← 迁移到 Vue 2.7 加入 Vue.js 社区！ →
发现错误或想为文档做出贡献？ 在 GitHub 上编辑！ 部署在 Netlify 上。