Vue.js 2.0 和 React、Augular等其余框架的全方位对比

时间 2019-11-12

标签 vue.js vue 2.0 react augular 其余框架全方位对比栏目 JavaScript 繁體版

原文原文链接

引言

这个页面无疑是最难编写的，但也是很是重要的。或许你遇到了一些问题而且先前用其余的框架解决了。来这里的目的是看看Vue是否有更好的解决方案。那么你就来对了。css

客观来讲，做为核心团队成员，显然咱们会更偏心Vue，对于某些问题用Vue来解决会更好，若是没有这点信念，咱们也就不会成天为此忙活了。可是，咱们想尽量地公平和准确地来说述。其余的框架也有显著的优势，好比 Rect 的生态系统，或者 Knockout 对浏览器支持到 IE6 。咱们把这些也都会全列出来。html

咱们但愿获得大家的帮助，来使文档保持更新，由于 JavaScript 的世界进步的太快。若是你注意到一个不许确或彷佛不太正确的地方，请提交问题让咱们知道。vue

React

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

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

类似的做用域，咱们会用更多的时间来说这一块的比较。不只咱们要保持技术的准确性，同时兼顾平衡。咱们指出React比Vue更好的地方，例如，他们的生态系统和丰富的自定义渲染器。webpack

React社区在这里很是积极地帮助咱们实现这一平衡，特别感谢来自 React 团队的 Dan Abramov 。他很是慷慨的花费时间来贡献专业知识，来帮咱们完善这个文件，直到咱们都满意。git

这么说，就是但愿你能对这两个库的比较的公平性感到放心。github

性能简介

到目前为止，在现实的测试中，Vue 是优于 React 的（一般至少快20%-50%，尽管在某些状况下还要更快）。咱们能够提供一个到这个参照项目的连接，可是坦率的说，全部的参照在某些方面是有缺陷的，不多有像你所写的一个真实应用。那么，让咱们详细了解下吧。web

渲染性能

在渲染用户界面的时候，DOM的操做是最昂贵，不幸的是没有库可让这些原始操做变得更快。
咱们能作的最好的就是：vuex

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

假如说，在React中，渲染一个元素的额外开销是1，而平均渲染一个组件的开销是2。在Vue中，一个元素的开销更像0.1，可是平均组件的开销将是4，这是因为一些系统的设置。vue-cli

这意味着什么呢，在大多数的应用中，须要渲染的元素比组件的数量是更多的，因此Vue的性能表现将会远优于React。然而，在极端状况下，好比每一个组件渲染一个元素，Vue 将一般会较慢。

Vue 和 React 也提供提供功能性组件，这些组件都是没有声明，没有实例化，所以须要更少的开销。当这些都用于性能的关键位置，Vue会更快。为了证实这点，咱们创建一个简单的参照项目，它只是渲染 10,000 个列表项 100次。咱们鼓励你本身去试一下，实际上，因为浏览器和硬件的缘由，结果会有所不一样，因为 JavaScript 引擎的不一样，结果也会有很大不一样。

若是你懒得去作，下面的数字数字从一个运行在 Chrome 52 在一个 2014年产的 MacBook Air上。为了不偶然性，每一个参照项目都分开运行20次，和包含的最好的结果：

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

更新性能

在React中，你须要在每一个地方去实现 shouldComponentUpdate ，而且用immutable数据结构才能实现彻底彻底优化的 re-renders 。在 Vue 中，组件的依赖被自动追踪，因此当这些依赖项变更时，它才会更新。在长列表中，有时候须要进一步优化的话，只须要在每项上添加 key 属性。

这意味着，因为Vue内改进过的渲染性能，更新未经优化的Vue会比未经优化的React要快的多。甚至全面优化过的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也容许你用预处理器好比Pub（原名 Jade）。

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

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

CSS的组件做用域

除非你把组件分布在多个文件上(例如 CSS Modules),要不做用域内的CSS就会暴警告。很是简单的CSS还能够工做，可是稍微复杂点的，好比悬停状态、媒体查询、伪类选择符要么会被修改要么就不能用。

Vue让你能够彻底访问单文件组件。

<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。

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

规模

扩大

Vue和React都提供了强大的路由来应对对于大型应用。React社区在状态管理方面很是有创新精神（好比Flux、Redux），而这些状态管理模式甚至 Redux自己也是很是容易可以集成在Vue应用中的。实际上，Vue更进一步地采用了这种模式（Vuex），把Vuex集成进Vue能带来更好的开发体验。

二者另外一个重要差别是，Vue伴随的路由库和状态管理库都是由官方支持维护且和核心库同步更新的。React 生态更成熟，选择是把这些问题交给社区维护。

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

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

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

缩小

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

Vue样扩大后就像React，缩小后就像 Jquery。你须要作的就是把以下标签放到页面就行：

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

而后就可编写Vue代码并应用到生产中，而不用担忧性能问题。

因为起步阶段不需学JSX，ES2015 或构建系统，因此创建应用花的时间会更少。

本地渲染

ReactNative能使你用相同的组件模型编写有本地渲染能力的APP（IOS或Android）。能同时跨多平台开发，对开发者是很是棒的。相应地，Vue和Weex会进行官方合做，Weex是阿里的跨平台用户界面开发框架，Weex 的 JavaScript 框架运行时用的就是Vue。这觉得着不只在浏览器，在 IOS 和 Android 上面也能够用 Vue 来进行开发。

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

MobX

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

Angular 1

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

复杂性

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

灵活性和模块化

Vue.js 是一个更加灵活开放的解决方案。它容许你以但愿的方式组织应用程序，而不是在任什么时候候都必须遵循 Angular 1 制定的规则，这使让Vue能适用于各类项目。咱们知道把决定权交给你，是很是必要的，就是是为何提供Webpack template，让你用几分钟，去选择是否用高级特性，好比热模块加载、linting 、
Css extraction 等等。

数据绑定

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

指令与组件

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

性能

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

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

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

有意思的是，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 的 App 的尺寸缩减是用 tree-shaking 移除了那些框架中没有用到的功能，当随着引入功能的增多，尺寸会愈来愈大。

灵活性

Vue 官方提供了构建工具，但没限制你如何构建。有人喜欢用统一的方式构建，也有不少开发者喜欢这种灵活自由的方式。

学习曲线

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

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

Ember

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

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

Vue 在普通 JavaScript 对象上创建响应，提供自动化的计算属性。在 Ember 中须要将全部东西放在 Ember 对象内，而且手工为计算属性声明依赖。
Vue 的模板语法能够用全功能的 JavaScript 表达式，而 Handlebars 的语法和帮助函数语法相比之下很是受限。
在性能上，Vue 甩开 Ember 几条街，即便是 Ember2.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不须要依赖polyfills来工做，最低到IE9。

在 Polymer 1.0版本中，为了弥补性能，团队很是有限的使用数据绑定系统。例如，在Ploymer中支持的惟一表达式只有布尔值否认和单一的方法的调用，它的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 可能共享一些设计理念。即便相比Roit重一点，Vue仍是有不少显著优点的：

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

引用

http://vuejs.org/guide/comparison.html