Vue和其余框架的区别

原文地址

---

 

React

React 和 Vue 有许多类似之处，它们都有：

• 使用 Virtual DOM
• 提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件。
• 将注意力集中保持在核心库，而将其余功能如路由和全局状态管理交给相关的库。

因为有着众多的类似处，咱们会用更多的时间在这一块进行比较。这里咱们不仅保证技术内容的准确性，同时也兼顾了平衡的考量。咱们须要认可 React 比 Vue 更好的地方，好比更丰富的生态系统。

下列部分章节会略微有些过期，由于最近 React 16+ 的发布，咱们计划在不久的未来和 React 社区一块儿重写这部份内容。

运行时性能

React 和 Vue 都是很是快的，因此速度并非在它们之中作选择的决定性因素。对于具体的数据表现，能够移步这个第三方 benchmark，它专一于渲染/更新很是简单的组件树的真实性能。

优化

在 React 应用中，当某个组件的状态发生变化时，它会以该组件为根，从新渲染整个组件子树。

如要避免没必要要的子组件的重渲染，你须要在全部可能的地方使用 PureComponent，或是手动实现 shouldComponentUpdate 方法。同时你可能会须要使用不可变的数据结构来使得你的组件更容易被优化。

然而，使用 PureComponent 和 shouldComponentUpdate 时，须要保证该组件的整个子树的渲染输出都是由该组件的 props 所决定的。若是不符合这个状况，那么此类优化就会致使难以察觉的渲染结果不一致。这使得 React 中的组件优化伴随着至关的心智负担。

在 Vue 应用中，组件的依赖是在渲染过程当中自动追踪的，因此系统能精确知晓哪一个组件确实须要被重渲染。你能够理解为每个组件都已经自动得到了 shouldComponentUpdate，而且没有上述的子树问题限制。

Vue 的这个特色使得开发者再也不须要考虑此类优化，从而可以更好地专一于应用自己。

HTML & CSS

在 React 中，一切都是 JavaScript。不只仅是 HTML 能够用 JSX 来表达，如今的潮流也愈来愈多地将 CSS 也归入到 JavaScript 中来处理。这类方案有其优势，但也存在一些不是每一个开发者都能接受的取舍。

Vue 的总体思想是拥抱经典的 Web 技术，并在其上进行扩展。咱们下面会详细分析一下。

JSX vs Templates

在 React 中，全部的组件的渲染功能都依靠 JSX。JSX 是使用 XML 语法编写 JavaScript 的一种语法糖。

使用 JSX 的渲染函数有下面这些优点：

• 你可使用完整的编程语言 JavaScript 功能来构建你的视图页面。好比你可使用临时变量、JS 自带的流程控制、以及直接引用当前 JS 做用域中的值等等。

• 开发工具对 JSX 的支持相比于现有可用的其余 Vue 模板仍是比较先进的 (好比，linting、类型检查、编辑器的自动完成)。

事实上 Vue 也提供了渲染函数，甚至支持 JSX。然而，咱们默认推荐的仍是模板。任何合乎规范的 HTML 都是合法的 Vue 模板，这也带来了一些特有的优点：

• 对于不少习惯了 HTML 的开发者来讲，模板比起 JSX 读写起来更天然。这里固然有主观偏好的成分，但若是这种区别会致使开发效率的提高，那么它就有客观的价值存在。

• 基于 HTML 的模板使得将已有的应用逐步迁移到 Vue 更为容易。

• 这也使得设计师和新人开发者更容易理解和参与到项目中。

• 你甚至可使用其余模板预处理器，好比 Pug 来书写 Vue 的模板。

有些开发者认为模板意味着须要学习额外的 DSL (Domain-Specific Language 领域特定语言) 才能进行开发——咱们认为这种区别是比较肤浅的。首先，JSX 并非没有学习成本的——它是基于 JS 之上的一套额外语法。同时，正如同熟悉 JS 的人学习 JSX 会很容易同样，熟悉 HTML 的人学习 Vue 的模板语法也是很容易的。最后，DSL 的存在使得咱们可让开发者用更少的代码作更多的事，好比 v-on 的各类修饰符，在 JSX 中实现对应的功能会须要多得多的代码。

更抽象一点来看，咱们能够把组件区分为两类：一类是偏视图表现的 (presentational)，一类则是偏逻辑的 (logical)。咱们推荐在前者中使用模板，在后者中使用 JSX 或渲染函数。这两类组件的比例会根据应用类型的不一样有所变化，但总体来讲咱们发现表现类的组件远远多于逻辑类组件。

组件做用域内的 CSS

除非你把组件分布在多个文件上 (例如 CSS Modules)，CSS 做用域在 React 中是经过 CSS-in-JS 的方案实现的 (好比 styled-components、glamorous 和 emotion)。这引入了一个新的面向组件的样式范例，它和普通的 CSS 撰写过程是有区别的。另外，虽然在构建时将 CSS 提取到一个单独的样式表是支持的，但 bundle 里一般仍是须要一个运行时程序来让这些样式生效。当你可以利用 JavaScript 灵活处理样式的同时，也须要权衡 bundle 的尺寸和运行时的开销。

若是你是一个 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) 为组件内 CSS 指定做用域，编译的时候 .list-container:hover 会被编译成相似 .list-container[data-v-21e5b78]:hover。

最后，Vue 的单文件组件里的样式设置是很是灵活的。经过 vue-loader，你可使用任意预处理器、后处理器，甚至深度集成 CSS Modules——所有都在 <style> 标签内。

规模

向上扩展

Vue 和 React 都提供了强大的路由来应对大型应用。React 社区在状态管理方面很是有创新精神 (好比 Flux、Redux)，而这些状态管理模式甚至 Redux 自己也能够很是容易的集成在 Vue 应用中。实际上，Vue 更进一步地采用了这种模式 (Vuex)，更加深刻集成 Vue 的状态管理解决方案 Vuex 相信能为你带来更好的开发体验。

二者另外一个重要差别是，Vue 的路由库和状态管理库都是由官方维护支持且与核心库同步更新的。React 则是选择把这些问题交给社区维护，所以建立了一个更分散的生态系统。但相对的，React 的生态系统相比 Vue 更加繁荣。

最后，Vue 提供了 Vue-cli 脚手架，能让你很是容易地构建项目，包含了 Webpack，Browserify，甚至 no build system。React 在这方面也提供了 create-react-app，可是如今还存在一些局限性：

• 它不容许在项目生成时进行任何配置，而 Vue 支持 Yeoman-like 定制。
• 它只提供一个构建单页面应用的单一模板，而 Vue 提供了各类用途的模板。
• 它不能用用户自建的模板构建项目，而自建模板对企业环境下预先创建协议是特别有用的。

而要注意的是这些限制是故意设计的，这有它的优点。例如，若是你的项目需求很是简单，你就不须要自定义生成过程。你能把它做为一个依赖来更新。若是阅读更多关于不一样的设计理念。

向下扩展

React 学习曲线陡峭，在你开始学 React 前，你须要知道 JSX 和 ES2015，由于许多示例用的是这些语法。你须要学习构建系统，虽然你在技术上能够用 Babel 来实时编译代码，可是这并不推荐用于生产环境。

就像 Vue 向上扩展比如 React 同样，Vue 向下扩展后就相似于 jQuery。你只要把以下标签放到页面就能够运行：

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

而后你就能够编写 Vue 代码并应用到生产中，你只要用 min 版 Vue 文件替换掉就不用担忧其余的性能问题。

因为起步阶段不需学 JSX，ES2015 以及构建系统，因此开发者只需不到一天的时间阅读指南就能够创建简单的应用程序。

原生渲染

React Native 能使你用相同的组件模型编写有本地渲染能力的 APP (iOS 和 Android)。能同时跨多平台开发，对开发者是很是棒的。相应地，Vue 和 Weex 会进行官方合做，Weex 是阿里巴巴发起的跨平台用户界面开发框架，同时也正在 Apache 基金会进行项目孵化，Weex 容许你使用 Vue 语法开发不只仅能够运行在浏览器端，还能被用于开发 iOS 和 Android 上的原生应用的组件。

在如今，Weex 还在积极发展，成熟度也不能和 React Native 相抗衡。可是，Weex 的发展是由世界上最大的电子商务企业的需求在驱动，Vue 团队也会和 Weex 团队积极合做确保为开发者带来良好的开发体验。

另外一个选择是 NativeScript-Vue，一个用 Vue.js 构建彻底原生应用的 NativeScript 插件。

MobX

Mobx 在 React 社区很流行，实际上在 Vue 也采用了几乎相同的反应系统。在有限程度上，React + Mobx 也能够被认为是更繁琐的 Vue，因此若是你习惯组合使用它们，那么选择 Vue 会更合理。

Preact 和其它类 React 库

类 React 的库们每每尽量地与 React 共享 API 和生态。所以上述比较对它们来讲也一样适用。它们和 React 的不一样每每在于更小的生态。由于这些库没法 100% 兼容 React 生态中的所有，部分工具和辅助库也可能没法使用。或者即便看上去能工做，但也有可能随时发生不兼容，除非你用的这个类 React 库官方与 React 保持严格一致。

AngularJS (Angular 1)

Vue 的一些语法和 AngularJS 的很类似 (例如 v-if vs ng-if)。由于 AngularJS 是 Vue 早期开发的灵感来源。然而，AngularJS 中存在的许多问题，在 Vue 中已经获得解决。

复杂性

在 API 与设计两方面上 Vue.js 都比 AngularJS 简单得多，所以你能够快速地掌握它的所有特性并投入开发。

灵活性和模块化

Vue.js 是一个更加灵活开放的解决方案。它容许你以但愿的方式组织应用程序，而不是在任什么时候候都必须遵循 AngularJS 制定的规则，这让 Vue 能适用于各类项目。咱们知道把决定权交给你是很是必要的。

这也是为何咱们提供了一个基于 Vue.js 进行快速开发的完整系统。Vue CLI 旨在成为 Vue 生态系统中标准的基础工具。它使得多样化的构建工具经过妥善的默认配置无缝协做在一块儿。这样你就能够专一在应用自己，而不会在配置上花费太多时间。同时，它也提供了根据实际需求调整每一个工具配置的灵活性。

数据绑定

AngularJS 使用双向绑定，Vue 在不一样组件间强制使用单向数据流。这使应用中的数据流更加清晰易懂。

指令与组件

在 Vue 中指令和组件分得更清晰。指令只封装 DOM 操做，而组件表明一个自给自足的独立单元——有本身的视图和数据逻辑。在 AngularJS 中，每件事都由指令来作，而组件只是一种特殊的指令。

运行时性能

Vue 有更好的性能，而且很是很是容易优化，由于它不使用脏检查。

在 AngularJS 中，当 watcher 愈来愈多时会变得愈来愈慢，由于做用域内的每一次变化，全部 watcher 都要从新计算。而且，若是一些 watcher 触发另外一个更新，脏检查循环 (digest cycle) 可能要运行屡次。AngularJS 用户经常要使用深奥的技术，以解决脏检查循环的问题。有时没有简单的办法来优化有大量 watcher 的做用域。

Vue 则根本没有这个问题，由于它使用基于依赖追踪的观察系统而且异步队列更新，全部的数据变化都是独立触发，除非它们之间有明确的依赖关系。

有意思的是，Angular 和 Vue 用类似的设计解决了一些 AngularJS 中存在的问题。

Angular (本来的 Angular 2)

咱们将新的 Angular 独立开来讨论，由于它是一个和 AngularJS 彻底不一样的框架。例如：它具备优秀的组件系统，而且许多实现已经彻底重写，API 也彻底改变了。

TypeScript

Angular 事实上必须用 TypeScript 来开发，由于它的文档和学习资源几乎所有是面向 TS 的。TS 有不少好处——静态类型检查在大规模的应用中很是有用，同时对于 Java 和 C# 背景的开发者也是很是提高开发效率的。

然而，并非全部人都想用 TS——在中小型规模的项目中，引入 TS 可能并不会带来太多明显的优点。在这些状况下，用 Vue 会是更好的选择，由于在不用 TS 的状况下使用 Angular 会颇有挑战性。

最后，虽然 Vue 和 TS 的整合可能不如 Angular 那么深刻，咱们也提供了官方的 类型声明 和 组件装饰器，而且知道有大量用户在生产环境中使用 Vue + TS 的组合。咱们也和微软的 TS / VSCode 团队进行着积极的合做，目标是为 Vue + TS 用户提供更好的类型检查和 IDE 开发体验。

运行时性能

这两个框架都很快，有很是相似的 benchmark 数据。你能够浏览具体的数据作更细粒度的对比，不过速度应该不是决定性的因素。

体积

在体积方面，最近的 Angular 版本中在使用了 AOT 和 tree-shaking 技术后使得最终的代码体积减少了许多。但即便如此，一个包含了 Vuex + Vue Router 的 Vue 项目 (gzip 以后 30kB) 相比使用了这些优化的 angular-cli 生成的默认项目尺寸 (~65KB) 仍是要小得多。

灵活性

Vue 相比于 Angular 更加灵活，Vue 官方提供了构建工具来协助你构建项目，但它并不限制你去如何组织你的应用代码。有人可能喜欢有严格的代码组织规范，但也有开发者喜欢更灵活自由的方式。

学习曲线

要学习 Vue，你只须要有良好的 HTML 和 JavaScript 基础。有了这些基本的技能，你就能够很是快速地经过阅读 指南 投入开发。

Angular 的学习曲线是很是陡峭的——做为一个框架，它的 API 面积比起 Vue 要大得多，你也所以须要理解更多的概念才能开始有效率地工做。固然，Angular 自己的复杂度是由于它的设计目标就是只针对大型的复杂应用；但不能否认的是，这也使得它对于经验不甚丰富的开发者至关的不友好。

Ember

Ember 是一个全能框架。它提供了大量的约定，一旦你熟悉了它们，开发会变得很高效。不过，这也意味着学习曲线较高，并且并不灵活。这意味着在框架和库 (加上一系列松散耦合的工具) 之间作权衡选择。后者会更自由，可是也要求你作更多架构上的决定。

也就是说，咱们最比如较的是 Vue 内核和 Ember 的模板与数据模型层：

• Vue 在普通 JavaScript 对象上创建响应，提供自动化的计算属性。在 Ember 中须要将全部东西放在 Ember 对象内，而且手工为计算属性声明依赖。

• Vue 的模板语法能够用全功能的 JavaScript 表达式，而 Handlebars 的语法和帮助函数相比来讲很是受限。

• 在性能上，Vue 比 Ember 好不少，即便是 Ember 3.x 的最新 Glimmer 引擎。Vue 可以自动批量更新，而 Ember 在性能敏感的场景时须要手动管理。

Knockout

Knockout 是 MVVM 领域内的先驱，而且追踪依赖。它的响应系统和 Vue 也很类似。它在浏览器支持以及其余方面的表现也是让人印象深入的。它最低能支持到 IE6，而 Vue 最低只能支持到 IE9。

随着时间的推移，Knockout 的发展已有所放缓，而且略显有点老旧了。好比，它的组件系统缺乏完备的生命周期事件方法，尽管这些在如今是很是常见的。以及相比于 Vue 调用子组件的接口它的方法显得有点笨重。

若是你有兴趣研究，你还会发现两者在接口设计的理念上是不一样的。这能够经过各自建立的 simple Todo List 体现出来。或许有点主观，可是不少人认为 Vue 的 API 接口更简单结构更优雅。

Polymer

Polymer 是另外一个由谷歌赞助的项目，事实上也是 Vue 的一个灵感来源。Vue 的组件能够粗略的类比于 Polymer 的自定义元素，而且二者具备类似的开发风格。最大的不一样之处在于，Polymer 是基于最新版的 Web Components 标准之上，而且须要重量级的 polyfills 来帮助工做 (性能降低)，浏览器自己并不支持这些功能。相比而言，Vue 在支持到 IE9 的状况下并不须要依赖 polyfills 来工做。

在 Polymer 版本中，为了弥补性能，团队很是有限的使用数据绑定系统。例如，在 Polymer 中惟一支持的表达式只有布尔值否认和单一的方法调用，它的 computed 方法的实现也并非很灵活。

Riot

Riot 3.0 提供了一个相似于基于组件的开发模型 (在 Riot 中称之为 Tag)，它提供了小巧精美的 API。Riot 和 Vue 在设计理念上可能有许多类似处。尽管相比 Riot ，Vue 要显得重一点，Vue 仍是有不少显著优点的：

• 更好的性能。Riot 使用了 遍历 DOM 树 而不是虚拟 DOM，但实际上用的仍是脏检查机制，所以和 AngularJS 患有相同的性能问题。
• 更多成熟工具的支持。Vue 提供官方支持 webpack 和 Browserify，而 Riot 是依靠社区来创建集成系统。

---

返回目录