vue对比其余框架

对比其余框架

React

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

• 使用 Virtual DOM
• 提供了响应式（Reactive）和组件化（Composable）的视图组件。
• 将注意力集中保持在核心库，伴随于此，有配套的路由和负责处理全局状态管理的库。

性能简介

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

渲染性能

在渲染用户界面时，DOM 操做成本是最高的，不幸的是没有库可让这些原始操做变得更快。
咱们能作到的最好效果就是：

1. 尽可能减小 DOM 操做。Vue 和 React 都使用虚拟 DOM 来实现，而且二者工做的效果同样好。
2. 尽可能减小除 DOM 操做之外的其余操做。这是 Vue 和 React 所不一样的地方。

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

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

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

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

	Vue	React
Fastest	23ms	63ms
Median	42ms	81ms
Average	51ms	94ms
95th Perc.	73ms	164ms
Slowest	343ms	453ms

更新性能

在 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社区审核过的例子：

render () { let { items } = this.props   let children if ( items.length > 0 ) { children = ( <ul> {items.map( item => <li key={item.id}>{item.name}</li> )} </ul> ) } else { children = <p>No items found.</p> }   return ( <div className = 'list-container'> {children} </div> ) }

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

• 你可使用完整的编程语言 JavaScript 功能来构建你的视图页面。
• 工具对 JSX 的支持相比于现有可用的其余 Vue 模板仍是比较先进的（好比，linting、类型检查、编辑器的自动完成）。

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

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

<template> <div class="list-container"> <ul v-if="items.length"> <li v-for="item in items"> {{ item.name }} </li> </ul> <p v-else>No items found.</p> </div> </template>

优势以下：

• 在写模板的过程当中，样式风格已定并涉及更少的功能实现。
• 模板老是会被声明的。
• 模板中任何 HTML 语法都是有效的。
• 阅读起来更贴合英语（好比，for each item in items）。
• 不须要高级版本的 JavaScript 语法，来增长可读性。

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

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

React 生态也有一个项目容许你写模板，可是存在一些缺点：

• 功能远没有 Vue 模板系统丰富。
• 须要从组件文件中分离出 HTML 代码。
• 这是个第三方库，而非官方支持，可能将来核心库更新就再也不支持。

CSS 的组件做用域

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

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

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

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

<script src="https://unpkg.com/vue/dist/vue.js"></script>

而后你就能够编写 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-if vs ng-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就很是简单。甚至咱们并不用花费一整个页面去介绍它。

Ember

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

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

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

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

• 在性能上，Vue 甩开 Ember 几条街，即便是 Ember 2.0 的最新 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 1.0 版本中，为了弥补性能，团队很是有限的使用数据绑定系统。例如，在 Polymer 中惟一支持的表达式只有布尔值否认和单一的方法调用，它的 computed 方法的实现也并非很灵活。

Polymer 自定义的元素是用 HTML 文件来建立的，这会限制使用 JavaScript/CSS（和被现代浏览器广泛支持的语言特性）。相比之下，Vue 的单文件组件容许你很是容易的使用 ES2015 和你想用的 CSS 预编译处理器。

在部署生产环境时，Polymer 建议使用 HTML Imports 加载全部资源。而这要求服务器和客户端都支持 Http 2.0 协议，而且浏览器实现了此标准。这是否可行就取决于你的目标用户和部署环境了。若是情况不佳，你必须用 Vulcanizer 工具来打包 Polymer 元素。而在这方面，Vue 能够结合异步组件的特性和 Webpack 的代码分割特性来实现懒加载（lazy-loaded）。这同时确保了对旧浏览器的兼容且又能更快加载。

而 Vue 和 Web Component 标准进行深层次的整合也是彻底可行的，好比使用 Custom Elements、Shadow DOM 的样式封装。然而在咱们作出严肃的实现承诺以前，咱们目前仍在等待相关标准成熟，进而再普遍应用于主流的浏览器中。

Riot

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

• 根据真实条件来渲染，Riot 根据是否有分支简单显示或隐藏全部内容。
• 功能更增强大的路由机制，Riot 的路由功能的 API 是极少的。
• 更多成熟工具的支持。Vue 提供官方支持Webpack、Browserify和SystemJS，而 Riot 是依靠社区来创建集成系统。
• 过渡效果系统。Riot 如今尚未提供。
• 更好的性能。Riot 尽管声称其使用了虚拟 DOM，但实际上用的仍是脏检查机制，所以和 Angular 1 患有相同的性能问题。

---

原文：http://vuejs.org/guide/comparison.html