更轻更快的Vue.js 2.0与其余框架对比(转)

更轻更快的Vue.js 2.0

崭露头角的JavaScript框架Vue.js 2.0版本已经发布，在狂热的JavaScript世界里带来了让人耳目一新的变化。

Vue建立者尤雨溪称，Vue 2.0 在性能上有显著的提高，同时保持轻量的文件下载：

渲染层基于一个轻量级的Virtual DOM实现进行了重写，该Virtual DOM实现fork自snabbdom。新的渲染层相比v1带来了巨大的性能提高，也让Vue 2.0成为了最快速的框架之一。

根据1.0到2.0迁移指南，“大约90％的API是相同的”。不一样于一些JavaScript框架，从一个版本到下一个版本会有巨大的变化，在Vue 2.0中“核心概念没有改变”。

除了核心库，vue-router和vuex库已经更新到2.0版本，vue-cli已经默认生成了 2.0 的脚手架。

在Vue 2.0第一次宣布发布时，尤雨溪说过滤器要离开了。然而随着时间的推移，这个立场改变了，Vue 2.0中仍然保留了文本插入过滤器。的确，在使用指南过滤器这一章节也指明了“Vue 2.x中过滤器仅能在mustache内部绑定使用。要在指令绑定中实现相同的行为，应该使用计算属性。”框架再也不提供任何内置过滤器，而且数组过滤器（削减了基于标准的数组）也已经取消了。

由于Vue主要不是由大型技术公司建立的，尤雨溪采起了不一样的融资方式。尤雨溪可以在这个项目全职工做要感谢Patreon，在Patreon上尤雨溪设置的赞助方式是每个月保证必定数量的金额。截至发稿时，Patreon每个月为Vue的可持续发展赞助8853美圆。除了尤雨溪以外，Vue.js核心团队还有18我的。

社区里大可能是积极的回应，“Vue比ng2更简洁”以及“我发现Vue 2.0介于Angular 1和React之间。它是现代化的而且很容易学习和使用”。

Vue在官网上发布了对比指南（http://vuefe.cn/guide/comparison.html），展现了它与其余框架的不一样之处，本文摘录其与如Angular和React对比。

对比 React

---

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

使用 Virtual DOM

提供了响应式（Reactive）和组件化（Composable）的视图组件。

将注意力集中保持在核心库，伴随于此，有配套的路由和负责处理全局状态管理的库。

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

React社区为咱们准确进行平衡的考量提供了很是积极地帮助，特别感谢来自 React 团队的 Dan Abramov 。他很是慷慨的花费时间来贡献专业知识，帮助咱们完善这篇文档，最后咱们对最终结果都十分满意。

有了上面这些内容，咱们但愿你能对下面这两个库的比较内容的公正性感到放心。

 

性能简介

到目前为止，针对现实状况的测试中，Vue 的性能是优于 React 的。若是你对此表示怀疑，请继续阅读。咱们会解释为何会这样（而且会提供一个与 React 团队共同约定的比较基准）。

渲染性能

在渲染用户界面的时候，DOM 的操做成本是最高的，不幸的是没有库可让这些原始操做变得更快。

咱们能作到的最好效果就是：

尽可能减小 DOM 操做。Vue 和 React 都使用虚拟 DOM 来实现，而且二者工做的效果同样好。

尽可能减小除 DOM 操做之外的其余操做。这是 Vue 和 React 所不一样的地方。

在 React 中，咱们设定渲染一个元素的额外开销是 1，而平均渲染一个组件的开销是 2。那么在 Vue 中，一个元素的开销更像是 0.1，可是平均组件的开销将会是 4，这是因为咱们须要设定响应系统所致使的。

这意味着：在典型的应用中，因为须要渲染的元素比组件的数量是更多的，所以 Vue 的性能表现将会远优于 React。然而，在极端状况下，好比每一个组件只渲染一个元素，Vue 就会一般更慢一些。固然接下来还有其余的缘由。

Vue 和 React 也提供功能性组件，这些组件由于都是没有声明，没有实例化的，所以会花费更少的开销。当这些都用于关键性能的场景时，Vue 将会更快。为了证实这点，咱们创建了一个简单的参照项目（https://github.com/chrisvfritz/vue-render-performance-comparisons），它负责渲染 10,000 个列表项 100 次。咱们鼓励你基于此去尝试运行一下。然而在实际上，因为浏览器和硬件的差别甚至 JavaScript 引擎的不一样，结果都会相应有所不一样。

若是你懒得去作，下面的数值是来自于一个 2014 年产的 MacBook Air 并在 Chrome 52 版本下运行所产生的。为了不偶然性，每一个参照项目都分别运行 20 次并取自最好的结果：

VueReact

Fastest23ms63ms

Median42ms81ms

Average51ms94ms

95th Perc.73ms164ms

Slowest343ms453ms

更新性能

在 React 中，你须要在到处去实现shouldComponentUpdate，而且用不可变数据结构才能实现最优化的渲染。在 Vue 中，组件的依赖被自动追踪，因此当这些依赖项变更时，它才会更新。惟一须要注意的可能须要进一步优化的一点是在长列表中，须要在每项上添加一个key属性。

这意味着，未经优化的 Vue 相比未经优化的 React 要快的多。因为 Vue 改进过渲染性能，甚至全面优化过的 React 一般也会慢于开箱即用的 Vue。

开发中

显然，在生产环境中的性能是相当重要的，目前为止咱们所具体讨论的即是针对此环境。但开发过程当中的表现也不容小视。不错的是用 Vue 和 React 开发大多数应用的速度都是足够快的。

然而，假如你要开发一个对性能要求比较高的数据可视化或者动画的应用时，你须要了解到下面这点：在开发中，Vue 每秒最高处理 10 帧，而 React 每秒最高处理不到 1 帧。

这是因为 React 有大量的检查机制，这会让它提供许多有用的警告和错误提示信息。咱们一样认为这些是很重要的，可是咱们在实现这些检查时，也更加密切地关注了性能方面。

 

HTML & CSS

在 React 中，它们都是 JavaScript 编写的，听起来这十分简单和优雅。然而不幸的事实是，JavaScript 内的 HTML 和 CSS 会产生不少痛点。在Vue 中咱们采用 Web 技术并在其上进行扩展。接下来将经过一些实例向你展现这意味的是什么。

JSX vs Templates

在 React 中，全部的组件的渲染功能都依靠 JSX。JSX 是使用 XML 语法编写 Javascript 的一种语法糖。这有一个经过React社区审核过的例子：

JSX 的渲染功能有下面这些优点：

你可使用完整的编程语言 JavaScript 功能来构建你的视图页面。

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

在 Vue 中，因为有时须要用这些功能，咱们也提供了渲染功能而且支持了 JSX。然而，对于大多数组件来讲，渲染功能是不推荐使用了。

在这方面，咱们提供的是更简单的模板：

优势以下：

在写模板的过程当中，样式风格已定并涉及更少的功能实现。

模板老是会被声明的。

模板中任何 HTML 语法都是有效的。

阅读起来更贴合英语（好比，for each item in items）。

不须要高级版本的 JavaScript 语法，来增长可读性。

这样，不只开发人员更容易编写代码，设计人员和开发人员也能够更容易的分析代码和贡献代码。

这尚未结束。Vue 拥抱 HTML，而不是用 JavaScript 去重塑它。在模板内，Vue 也容许你用预处理器好比 Pug（原名 Jade）。

React 生态也有一个项目(https://wix.github.io/react-templates/)容许你写模板，可是存在一些缺点：

功能远没有 Vue 模板系统丰富。

须要从组件文件中分离出 HTML 代码。

这是个第三方库，而非官方支持，可能将来核心库更新就再也不支持。

CSS 的组件做用域

除非你把组件分布在多个文件上(例如CSS Modules)，要不在 React 中做用域内的 CSS 就会产生警告。很是简单的 CSS 还能够工做，可是稍微复杂点的，好比悬停状态、媒体查询、伪类选择符等要么经过沉重的依赖来重作要么就直接不能用。

而 Vue 可让你在每一个单文件组件中彻底访问 CSS。

这个可选scoped属性会自动添加一个惟一的属性（好比data-v-1）为组件内 CSS 指定做用域，编译的时候.list-container:hover会被编译成相似.list-container[data-v-1]:hover。

最后，就像 HTML 同样，你能够选择本身偏心的 CSS 预处理器编写 CSS。这可让你围绕设计为中心展开工做，而不是引入专门的库来增长你应用的体积和复杂度。

 

规模

向上扩展

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。你只要把以下标签放到页面就能够运行：

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

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

 

本地渲染

ReactNative 能使你用相同的组件模型编写有本地渲染能力的 APP（IOS 和 Android）。能同时跨多平台开发，对开发者是很是棒的。相应地，Vue 和Weex会进行官方合做，Weex 是阿里的跨平台用户界面开发框架，Weex 的 JavaScript 框架运行时用的就是 Vue。这意味着在 Weex 的帮助下，你使用 Vue 语法开发的组件不只仅能够运行在浏览器端，还能被用于开发 IOS 和 Android 上的原生应用。

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

 

MobX

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

对比Angular 1

---

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

复杂性

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

灵活性和模块化

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

这也就是为何咱们提供Webpack template，让你能够用几分钟，去选择是否启用高级特性，好比热模块加载、linting、CSS 提取等等。

数据绑定

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

指令与组件

在 Vue 中指令和组件分得更清晰。指令只封装 DOM 操做，而组件表明一个自给自足的独立单元 —— 有本身的视图和数据逻辑。在 Angular 中二者有很多相混的地方。

性能

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

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

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

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

对比 Angular 2

---

咱们单独将 Augluar 2 做分类，由于它彻底是一个全新的框架。例如：它具备优秀的组件系统，而且许多实现已经彻底重写，API 也彻底改变了。

TypeScript

Angular 1 面向的是较小的应用程序，Angular 2 已转移焦点，面向的是大型企业应用。在这一点上 TypeScript 常常会被引用，它对那些喜欢用 Java 或者 C# 等类型安全的语言的人是很是有用的。

Vue 也十分适合制做企业应用，你也能够经过使用官方类型或用户贡献的装饰器来支持 TypeScript，这彻底是自由可选的。

大小和性能

在性能方面，这两个框架都很是的快。但目前尚没有足够的数据用例来具体展现。若是你必定要量化这些数据，你能够查看第三方参照，它代表 Vue 2 相比 Angular2 是更快的。

在大小方面，虽然 Angular 2 使用 tree-shaking 和离线编译技术使代码体积减少了许多。但包含编译器和所有功能的 Vue2(23kb) 相比 Angular 2(50kb) 仍是要小的多。可是要注意，用 Angular 2 的 App 的体积缩减是使用了 tree-shaking 移除了那些框架中没有用到的功能，但随着功能引入的不断增多，尺寸会变得愈来愈大。

灵活性

Vue 相比于 Angular 2 则更加灵活，Vue 官方提供了构建工具来协助你构建项目，但它并不限制你去如何构建。有人可能喜欢用统一的方式来构建，也有不少开发者喜欢这种灵活自由的方式。

学习曲线

开始使用 Vue，你使用的是熟悉的 HTML、符合 ES5 规则的 JavaScript（也就是纯 JavaScript）。有了这些基本的技能，你能够快速地掌握它(指南)并投入开发 。

Angular 2 的学习曲线是很是陡峭的。即便不包括 TypeScript，它的开始指南中所用的就有 ES2015 标准的 JavaScript，18个 NPM 依赖包，4 个文件和超过 3 千多字的介绍，这一切都是为了完成个 Hello World。而Vue’s Hello World就很是简单。甚至咱们并不用花费一整个页面去介绍它。