React vs. Vue：JavaScript titan的冲突-CSDN博客

是仅仅几年前，我们通过小心谨慎地将每个标签可爱地放置在文件中来构建我们的网站吗？手工制作网站的时代早已过去。大多数现代网站都是精心制作的程序，它们会不断地对多个数据源执行ping操作，然后搅乱嵌套在其他标签内部的标签中的复杂标签。它是在与链接到Web服务的框架链接的库之上构建的代码层，所有这些都将一些文字和图片显示在屏幕上。

今天，用于创建这些复杂机制的两个最喜欢的选择是React和Vue.js，这两个代码块可能会根据您如何定义单词而称为库或框架。它们是用于收集您的组件并将其转变为无休止变形，即时反应的显示器的机器。不要说，因为这个词的 web 应用程序是一个更适合他们正在设置Web 站点的基础。

[了解React？ 不要错过InfoWorld的React入门教程。 | 通过InfoWorld的App Dev Report新闻通讯了解编程方面的热门话题。 ]

React和Vue来自具有类似想法的有远见的程序员。 React是开源的，并得到Facebook团队的正式支持。这是公司如何拥抱开放源代码以共享和建立其互联网愿景背后的创新热情的一个示例。 Vue来自前Google员工Evan You，他希望创建一个更小巧，更灵活的版本，该功能或多或少地实现了相同的功能，而仅带来了一点点令人敬畏的效果，或者对于功能而言可能是个流行词。

两者都通过放弃处理网页块的本机例程（即所谓的DOM或文档对象模型）而获得了很大的性能提升。 React和Vue创建了一个并行的“虚拟DOM”，该虚拟DOM跟踪所有运动部件，直到最后一微秒，它们才将干净，优化的标签集合传递给浏览器以进行渲染。目的是防止浏览器接触或对移动部件做任何事情，因为浏览器的表示速度不如虚拟DOM快或没有问题。

它们还提供了一种复杂的机制来组织站点的各个部分以及从一个部分跳转到另一部分的事件。当单击或击键切换焦点时，React和Vue都将处理路由和状态管理，因此您可以专注于将零件或组件放在正确位置的高级工作。

两者的性能也相当相似。 Stefan Krause的这组简单，独立的测试处理了许多DOM对象，这表明React和Vue都处于中间位置。对于某些关键项，React速度更快，但是Vue似乎使用的内存更少。您的结果可能会有所不同，但是这些结果表明，对于许多基本工作，您无需根据性能做出决定。

当您谈论架构的宏伟愿景时，React和Vue之间的区别不会出现。它们更多地是在战术，各种杂务和手艺方面，它们填补了每日点击流。在白板上草绘系统的基本部分时，您不会注意到差异。当您进入杂草丛中，并想知道组分A获得组分B改变其背景颜色或类似颜色的最佳方法时，就会开始感觉到它。

为了帮助您理解这一难题，以下列出了在这些原因中进行选择的理由，包括宏大和琐碎。

反应很大

从绝对意义上来说这并不大。它只是100K字节多一点，因此在加载时不会减慢您的Web应用程序的速度。精神更大。如果需要一种稍微更好，更雄心勃勃的方法来创建您的应用程序，React团队会将其添加到系统中。您不仅可以使用模板来构建组件，还可以使用JSX （一种巧妙的语言，它将JavaScript的所有功能与标记混合在一起）。如果要处理状态，可以使用Redux ，这是一种传递值的复杂方法。 Redux感觉像是React开发人员没有让任何事情妨碍他们将Web改造成他们的野心。

Vue不大

比较最近的版本时，Vue稍微小一点，大约是React的一半。这个很小的差异可能会节省一微秒的加载时间，我发誓随着时间的推移，您会开始感到这种感觉。真正的区别在于态度。 Vue开发人员没有让他们的想象力疯狂。在可能的情况下，他们采用了更标准的方式来构建站点。它们的模板就像我们过去看到的模板。 Vue使用CSS的方式与此类似。这不是一个宏伟的实验，而是一个精简计划，旨在将一些聪明的想法带到桌面上。

React具有JSX和JavaScript功能

React中的组件是用一种称为JSX的语言构建的。从技术上讲，它是JavaScript的预处理程序，这意味着您可以在组件中放置基本标签时随时使用JavaScript进行大多数操作。如果您需要检查某些数据结构或从某些数据块中提取一些复杂的值，则可以在用来表示它的标签旁边添加该代码。许多React程序员喜欢说他们正在设计一个大型JavaScript程序，而该程序恰好带有一些标签。

Vue没有（谢天谢地）

并非所有人都喜欢JSX。（如果您真的喜欢它，但又想使用Vue，则可以重新连接Vue以使用JSX。）有些人发现在编写JavaScript和编写HTML标签时很难跟踪。标点符号与常规JavaScript的区别足以使您不断尝试记住是否要按分号键。然后有些词是不同的。您不要在HTML标记的属性中使用“类”一词，因为它与JavaScript的受保护关键字冲突，因此您使用“类名”。所有这些小差异都会让您有点发疯。

Vue团队喜欢说，放弃JSX的所有聪明才智会缩短学习时间，并使新手可以快速理解代码。模板的行为就像在很大程度上要填充HTML的模板一样，就像它们将成为的网站一样。 JavaScript很好地分开了。它只是简单得多。如果您对简单性感到满意，那么Vue会更容易上手。

React仅仅是个开始

确实，您几乎首先要添加额外的库来处理诸如路由之类的标准杂务。选择React的开发人员然后进行下一轮决策，例如是否使用Redux或Flux或其他任何选择。 React程序员喜欢这种灵活性和创新，它源于应用程序所有层级之间的激烈竞争。

Vue更加集成

Vue附带了许多为您制定的基本决定。 Vuex是一个维护状态的主要系统，大多数人都使用它。使用vue-router调度请求也是如此。您并不是绝对需要使用它们，但是它们已经由构建所有组件的同一团队深度集成和维护。那为什么不呢？通常，您想要的大部分内容可能已经存在并已半标准化。

React具有适用于本机移动应用程序的React Native

您可以将大量的工作用于Web应用程序，并通过使用React Native重建它，将其转变为移动应用程序。这并不像将JavaScript放到Web组件中的其他方法那样容易，因为React Native可以与原则上更快，更干净的本机组件一起工作。您的构造将转换为这些本机组件，而不是由常规React生成的HTML标签。差异使这成为一个挑战，尤其是如果您广泛使用CSS时，因为React Native组件不会讲它。但是您仍然可以重用您所有的React知识和直觉。

Vue刚刚获得本机移动路径

Weex是Apache基金会正在孵化的一个开源项目。 Vue开发人员可以使用它一次构建iOS，Android和Web应用程序。查看聪明的操场dotwe进行开发和测试。

对ES6做出反应

React是使用ES6构建的，ES6是JavaScript的最新版本，它具有用于打包和解压缩数据结构的所有巧妙语法工具。如果您是ES6包含的简洁代码的忠实拥护者，那么React就适合您。

Vue对ES5感到满意

Vue适用于ES6，但您也可以使用ES5级代码。这不是一个限制。这是Vue库更加灵活的一种方式。

React实施可优化的数据结构

据说所有的React数据结构都是不可变的，这种做法使编写更简洁的代码更加容易。但是，如果您需要更改数据怎么办？您调用“ setState”方法，该方法处理所有更改，然后触发适当数量的屏幕更新。从理论上讲，它只会重新呈现需要更改的内容。

Vue采用更传统的方法

如果要在Vue中更改数据元素，请使用与日常JavaScript相同的标准点语法。无需改变您的习惯。

React在JavaScript上实施了一种新方法

React是一个巨大的飞跃。 React并没有坚持让人们将他们的逻辑（JavaScript）与显示机制（HTML）分开，而是将两者混合在一起，这样您就可以将桌面应用程序的一些即时响应式魔术带入Web应用程序。过去，Web开发人员旨在纯粹分离所谓的“模型-视图-控制器”模式。 React提供了一种解放和无限灵活的前进方式。