Vue.js 2.0与其他前端框架如React和Augular竞争

反应

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

使用虚拟DOM

提供了反应视图和可组合视图组件。

将注意力集中在核心库上。有了这个，就有了负责处理全局状态管理的支持路由和库。

类似的范围，我们会花更多的时间来谈这一块的比较。我们不仅要保持技术的准确性，还要注意平衡。我们指出了React相对于Vue的优势，例如，它们的生态系统和丰富的自定义渲染器。

React社区在这里帮助我们实现这种平衡，特别感谢React团队的丹阿布拉莫夫。他非常慷慨地花时间贡献他的专业知识来帮助我们完善这份文件，直到我们都满意为止。

所以，希望大家对两个库比较的公平性放心。

性能介绍

到目前为止，Vue在实际测试中优于React(通常至少快20%-50%，尽管在某些情况下更快)。我们可以提供这个参考项目的链接，但坦率地说，所有的参考文献在某些方面都有缺陷，很少有像你写的那样有真正的应用。好吧，让我们了解更多。

渲染性能

在呈现用户界面时，DOM操作是最昂贵的。不幸的是，没有库可以使这些原始操作更快。我们能做的最好的事情是：

最小化DOM操作。Vue和React都是使用虚拟DOM实现的，两者的工作效果一样好。最小化除DOM操作之外的操作。这是Vue和React的区别。比方说，在React中，渲染一个元素的开销是1，而渲染一个组件的平均开销是2。在Vue中，一个元素的成本更像是0.1，但是平均组件成本将是4，这是由于一些系统设置。

这是什么意思？在大多数应用程序中，要渲染的元素比组件的数量还要多，所以Vue的性能会比React好得多。但是，在极端情况下，例如每个组件渲染一个元素，Vue通常会很慢。

Vue和React也提供了功能组件，这些组件没有声明和实例化，所以它们需要更少的开销。当这些用在业绩的关键岗位上，Vue会更快。为了证明这一点，我们创建了一个简单的引用项目，它只渲染10000个列表项100次。我们鼓励您亲自尝试。事实上，由于浏览器和硬件的不同，结果会有所不同，由于JavaScript引擎的不同，结果也会有很大的不同。

如果你懒得做，下面的数字来自2014年在Chrome 52上运行的MacBook Air。为了避免偶然性，每个参考项目单独运行20次，并包含最佳结果：

更新性能

在React中，需要处处实现shouldComponentUpdate，使用不可变的数据结构实现完全优化的重渲染。在Vue中，组件的依赖关系是自动跟踪的，所以当这些依赖关系改变时，它会被更新。在长列表中，有时如果需要进一步优化，只需要将关键属性添加到每个项目中。

这意味着由于Vue中渲染性能的提高，更新未优化的Vue和避免未优化的React要快得多。即使是完全优化的反应通常也比未处理的Vue慢。

发育不全

显然，生产中的性能是最重要的，这也是我们到目前为止所讨论的。开发过程中的性能也很重要。好消息是，用Vue和React开发大多数应用程序已经足够快了。

但是，当您想要开发具有高性能要求的数据可视化或动画应用程序时，这将非常有用。在开发中，Vue每秒最多可以处理10帧，而React每秒处理不到1帧。

这是因为React有大量的检查机制，可以提供许多有用的警告和错误消息。我们同意那些重要的，但是当我们实施这些检查时，我们也更加关注性能。

HTML CSS

在React里面，都是JavaScript，听起来很简单，很优雅。不幸的是，JavaScript中的HTML和CSS会带来很多痛苦。在Vue中，我们采用了网络技术并对其进行了扩展。接下来，我将通过一些例子向您展示这意味着什么。

JSX vs模板

在React中，JSX用于渲染所有组件的功能。JSX是用XML语法编写Javascript的语法糖。下面是一个已被React社区批准的示例：

render () { let { items }=this.props让孩子if(items . length 0){ children=(ul { items . map(item=Li key={ item . id } { item . name }/Li)}/ul)} else { children=pnotitems found。/p} return (div类名=' list-container ' { children }/div)} jsx的呈现功能有一些优点：

您可以使用完整的编程语言JavaScript来构建视图页面。与其他可用的Vue模板相比，该工具支持更高级的JSX(例如，林挺，类型检查，编辑器自动完成)。在Vue中，因为我们有时需要使用那些函数，所以我们也提供渲染函数并支持JSX。但是，对于大多数组件，不建议使用渲染功能。

在这方面，我们提供了一个更简单的模板：

template div class=' list-container ' ul v-if=' items . length ' Li v-for=' items ' { items . name } }中的项目/Li/ul p v-否则找不到项目。/p/div/template具有以下优点：

在编写模板的过程中，风格已经确定，业务逻辑涉及较少。

模板总是被声明的。

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

它读起来更像英语(例如，对于条目中的每个条目)。

JavaScript的高级版本增加了可读性。

这样，不仅开发人员可以更容易地编写代码，而且设计人员和开发人员也可以更容易地分析和贡献代码。

还没有结束。Vue拥抱HTML，而不是用JavaScript重新发明它。在模板中，Vue还允许您使用预处理器，如Pub(以前称为Jade)。

React Ecology也有一个允许您编写模板的项目，但是它有一些缺点：

功能远不如Vue模板系统。

HTML代码需要与组件文件分开。

这是一个第三方库，不受官方支持，在未来的核心库更新中可能不支持。

CSS的组件范围

除非您将组件分布在多个文件上(例如CSS Modules)，否则范围内的CSS会突然发出警告。很简单的CSS还是可以用的，但是稍微复杂一点的，比如悬停状态、媒体查询、伪类选择器，要么修改，要么不使用。

Vue让您可以完全访问单个文件组件。

样式范围@media(最小宽度： 250px) {。list-container : hover { background : orange；}} /style这个可选的作用域属性会自动添加一个唯一的属性(比如data-v-1)来指定组件中CSS的作用域。编译时，list-container:hover将被编译为类似于。列表容器[data-v-1] :Hover。

最后，可以选择自己喜欢的CSS预处理器来编写CSS。这允许您围绕设计工作，而不是引入库来增加应用程序的容量和复杂性。

规模

发展

Vue和React都提供了处理大规模应用程序的强大途径。React社区在状态管理(如Flux和reduce)方面非常创新，这些状态管理模式，甚至reduce本身，都可以轻松集成到Vue应用程序中。其实Vue进一步采用了这种模式(Vuex)，将Vuex集成到Vue中可以带来更好的开发体验。

两者的另一个重要区别是，Vue附带的路由库和状态管理库由官方支持维护，并与核心库同步更新。React生态比较成熟，选择是把这些问题交给社区维护。

最后，Vue提供了一个Vue-cli支架，让你构建项目变得非常容易，可以包括Webpack、Browserify，也可以不构建系统。React在这方面也提供了create-react-app，但还是有一些限制：

它不允许在项目生成期间进行任何配置，而Vue运行类似Yeoman的定制。

它只为构建单个页面应用程序提供了一个模板，而Vue为各种目的提供了多个模板。

它不能使用用户构建的模板来构建项目，这对于在企业环境中预先建立协议非常有用。

请注意，这些限制是故意设计的，这有其优点。例如，如果您的项目需求非常简单，则不需要定制生成过程。您可以将其更新为依赖项。如果你多读一些不同的设计概念。

收缩

反应学习曲线是陡峭的。在开始学习React之前，你需要了解JSX和ES2015，因为很多例子都使用了这些语法。你需要学习如何建立一个系统。虽然从技术上讲，您可以使用Babel Standalone编译代码，但不建议将其用于生产。

Vue样本放大时像React，缩小时像Jquery。您只需要在页面上放置以下标签:

然后，脚本src=' http:https://unpkg.com/Vue/dist/vue.js'/script可以编写vue代码并将其应用于生产，而无需担心性能。

由于在初始阶段不需要学习JSX、ES2015或构建系统，因此构建应用程序所需的时间会更少。

局部渲染

ReactNative使您能够使用相同的组件模型编写具有本地渲染功能的应用程序(iOS或Android)。对于开发人员来说，能够同时跨多个平台进行开发是非常棒的。据此，Vue和Weex将正式合作，Weex是阿里的跨平台用户界面开发框架，Weex的JavaScript框架与Vue一起运行。人们认为Vue不仅可以在浏览器中进行开发，还可以在IOS和安卓中进行开发。

目前，Weex仍在积极发展，其成熟度无法与ReactNative抗衡。但Weex的发展是由全球最大电商企业的需求驱动的，Vue团队会积极与Weex团队合作，保证开发者有良好的开发体验。

MobX

Mobx在React社区非常受欢迎。事实上，Vue采用的几乎是同样的反应体系。在有限的程度上，React Mobx也可以算是一个比较复杂的Vue，所以如果你习惯了两者结合使用，选择Vue会更合理。

角度1

Due的一些语法与Angular非常相似(例如，v-if vs ng-if)。棱角分明是Vue早期发展的灵感来源。但是，Augular存在很多问题，Vue已经解决了这些问题。

复杂性

Vue.js在API和设计方面都比Angular 1简单很多，所以你可以快速掌握它的所有特性并投入开发。

灵活性和模块化

Vue.js是一个更加灵活和开放的解决方案。它允许您按照自己想要的方式组织应用程序，而不必一直遵循Angular 1设置的规则，这使得Vue适用于各种项目。我们知道给你决策权是非常必要的，这也是我们提供Webpack模板的原因，它可以让你在几分钟内选择是否使用热模块加载、林挺、Css抽取等高级功能。

数据绑定

Angular 1使用双向绑定，Vue强制不同组件之间的单向数据流。这使得应用程序中的数据流清晰易懂。

命令和组件

在Vue中，指令和组件被更清晰地分开。指令只封装DOM操作，而组件代表一个自给自足的独立单元——，有自己的视图和数据逻辑。在Angular中，两者有很多相似之处。

表演

Vue.js有更好的性能，并且非常非常容易优化，因为它不使用脏检查。

在Angular 1中，当观察者越来越多时，它会变得越来越慢，因为范围的每一次变化，所有的观察者都必须重新计算。而且，如果某个观察器触发了另一个更新，脏检查周期可能会运行多次。棱角分明的用户经常使用深奥的技术来解决脏检查周期的问题。有时没有简单的方法来优化具有大量观察器的范围。

Vue.js完全没有这个问题，因为它使用基于依赖跟踪的观察系统，异步更新。所有数据更改都是独立触发的，除非它们之间存在明确的依赖关系。

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

角度2

Augluar 2是一个全新的框架。比如它有优秀的组件系统，很多实现都被完全重写了，API也完全改变了。

以打字打的文件

Angular 1针对的是较小的应用程序，而Angular 2已将其重点转移到大型企业应用程序。TypeScript被引用，这对于那些喜欢使用类型安全语言(如Java或C#)的人来说非常有用。

Vue也适合企业应用，TypeScript也可以用来支持官方类型和用户投稿类型，虽然这是可选的。

尺寸和性能

就性能而言，这两个框架都非常快。但是如果你看看第三方的参考文献，你会发现Vue 2比Angular2更快。

在大小方面，Angular 2可以通过使用摇树技术和编译技术来减少代码大小。

甚至包括编译器和所有函数的Vue2(23kb)也比Angular 2(50kb)小得多。但需要注意的是，Angular App的尺寸缩小是通过摇树的方式去除框架中未使用的功能，尺寸会随着引入功能的增加而越来越大。

灵活性

Vue官方提供构建工具，但是对如何构建没有限制。有些人喜欢用统一的方式构建，很多开发者喜欢这种灵活自由的方式。

学习曲线

要开始使用Vue，您需要使用熟悉的符合ES5规则的HTML和JavaScript(也就是纯JavaScript)。有了这些基本功，你就能很快掌握并投入开发。

Angular 2的学习曲线非常陡峭。即使不包括TypeScript，ES2015标准的JavaScript、18个依赖NPM的包、4个文件和3000多个单词都用在他们的开始指南中，所有这些都是为了完成一个Hello World。而Vue的《你好世界》很简单。

余烬

烬是一个全能的框架。它提供了很多约定，一旦你熟悉了它们，开发就会非常高效。然而，这也意味着学习曲线高且不灵活。框架和库(加上一系列松散耦合的工具)之间的权衡。后者更自由，但也需要你做出更多的架构决策。

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

Vue在常见的JavaScript对象上构建响应，并提供自动计算属性。在Ember中，您需要将所有内容放入Ember对象中，并手动声明计算属性的依赖关系。

Vue的模板语法可以使用全功能的JavaScript表达式，而Handlebars的语法与helper函数相比非常有限。

性能方面，Vue距离Ember只有几个街区的距离，即使是Ember2.0最新的微光引擎，Vue也是自动批量更新的，在性能关键的时候需要手动管理Ember。

迷人的

淘汰赛是MVVM的先驱，追踪从属关系。它的反应系统类似于Vue。它对浏览器的支持和所有性能也令人印象深刻。它至少可以支持IE6，而Vue至少只能支持IE9。

随着时间的推移，淘汰赛的发展有所放缓，有点老了。例如，它的组件系统缺乏一个完整的生命周期事件方法，尽管这些现在非常普遍。相比Vue，调用子组件的接口有点麻烦。

如果你有兴趣学习，你会发现他们在界面设计的概念上是不同的。这些可以通过他们自己的简单待办事项列表来反映。可能比较主观，但很多人认为Vue的API接口更简单，更优雅。

聚合物

Polymer是谷歌赞助的另一个项目，实际上是Vue的灵感来源。Vue的组件大致可以和Polymer的定制元素进行对比，两者开发风格相似。最大的区别是Polymer是建立在最新版本的Web Components标准上的，它需要非凡的polyfills才能工作(性能下降)，而浏览器本身并不支持这些功能。相比较而言，Vue不需要依靠polyfills工作，最低的是IE9。

在Polymer版本中，为了补偿性能，团队使用的数据绑定系统非常有限。例如，Ploymer中唯一支持的表达式是布尔否定和单方法调用，其计算方法的实现不是很灵活。

聚合物自定义元素是用HTML文件创建的，这限制了您的常见JavaScript/CSS(以及现代浏览器通常支持的语言功能)。相比之下，Vue的单个文件允许您非常轻松地使用ES2015和您想要的Css预编译处理器。

当部署到生产环境中时，Polymer建议使用HTML Imports来加载所有资源。这要求服务器和客户端都支持Http 2.0协议，并且浏览器实现该标准。这是否可行取决于您的目标用户和部署环境。如果情况不好，必须使用硫化机工具包装聚合物元件。在这方面，Vue可以通过结合异步组件的特性和Webpack的代码分区特性来实现惰性加载。同时，它确保了与旧浏览器的兼容性，并且可以更快地加载。

深度集成Vue和Web Component标准也是可行的，比如自定义元素和Shadow DOM样式封装。然而，在我们做出严肃的承诺之前，我们仍然在等待标准成熟，然后在主流浏览器中广泛使用。

暴乱

Riot 2.0提供了基于组件的开发模型(Riot中称为“Tag”)，提供了一个小巧精致的API。Riot和Vue可能会分享一些设计理念。即使它比Roit重一点，Vue仍然有许多显著的优势：

根据真实情况渲染，Roit只是根据是否有分支来显示或隐藏一切。

凭借更强大的路由机制，Roit的路由功能的API非常少。

来自更成熟工具的支持。Vue为Webpack、Browserify和SystemJS提供官方支持，而Roit则依靠社区来构建集成系统。过渡效应系统。Riot现在不可用。

性能更好。Roit实际上使用了脏检查机制，尽管广告声称使用了虚拟DOM，因此它遇到了与Angular 1相同的性能问题。

以上是边肖推出的Vue.js 2.0与React、Augular等其他前端框架的竞争，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！