Vue和React是目前比较流行的两个JavaScript框架。它们之间有什么区别，各自的优缺点是什么？本文将为您介绍。我写过两个几乎一模一样的web应用，一个基于Vue，一个基于React，方便大家阅读本文时查找相关代码。ReactsampleappVuesampleapp简介除非你最近没有关注前端开发，否则你一定听说过Facebook创建的JavaScriptUI框架React。它支持大多数Facebook网站，包括Instagram。React不同于当时流行的jQuery、Backbone.js和Angular1框架，它的诞生改变了JavaScript的世界。最大的变化之一是React推广了VirtualDOM（我们稍后会探讨）并创建了一种新的语法——JSX，它允许开发人员用JavaScript编写HTML（译者注：HTMLinJavaScript）。WAT?Vue致力于解决与React相同的问题，但它提供了另一套解决方案。Vue使用模板系统而不是JSX，可以更轻松地升级现有应用程序。这是因为模板使用普通的HTML。通过Vue集成现有系统相对容易，不需要整体重构。同时Vue声称它更容易学习，我最近刚接触Vue并且可以证明这一点。关于Vue需要说的是，Vue主要由单个开发人员维护，而不是像React那样由Facebook这样的大公司维护。相似之处React和Vue之间有很多相似之处。例如，它们都是专注于创建富前端应用程序的JavaScriptUI框架。与“功能齐全”的早期JavaScript框架不同，Reat和Vue只有框架的骨架，路由、状态管理等其他功能都是框架的独立组件。VirtualDOM啊哈，人们常说什么是VirtualDOM？Vue.js（2.0版）和React之间最大的相似之处之一是它们都使用称为“虚拟DOM”的东西。所谓VirtualDOM，基本上就是它的名字的意思：虚拟DOM，DOM树的虚拟表示。它的诞生基于这样一个概念，即改变实际的DOM状态比改变JavaScript对象要昂贵得多。虚拟DOM是映射真实DOM的JavaScript对象。如果你需要改变任何元素的状态，你必须先在虚拟DOM上改变它，而不是直接改变真实的DOM。当发生变化时，会创建一个新的虚拟DOM对象，并计算新旧虚拟DOM之间的差异。然后将这些差异应用于真实的DOM。例子如下，我们可以看到下面列表的代码是如何用HTML写的：item1item2在JavaScript中，我们可以使用objects:{type:'ul',props:{'class':'list'},children:[{type:'li',props:{},children:['item1']},{type:'li',props:{},children:['item2']}]}真实的VirtualDOM会比上面的例子复杂一些，但是本质上具有嵌套数组的本机对象。当一个新项目被添加到这个JavaScript对象时，一个函数会计算新旧虚拟DOM之间的差异，并将其反映在真实的DOM上。计算差异的算法是高性能框架的秘诀，React和Vue的实现略有不同。Vue声称它可以更快地计算出VirtualDOM的差异，因为它会在渲染过程中跟踪每个组件的依赖关系，而无需重新渲染整个组件树。对于React，每次应用程序的状态发生变化时，所有的子组件都会被重新渲染。当然，这可以通过shouldComponentUpdate生命周期方法来控制，但Vue将此视为默认优化。总结：如果您的应用程序具有复杂的交互并且需要处理大量的UI更改，那么使用VirtualDOM是个好主意。如果不经常更新元素，那么VirtualDOM不一定适用，性能可能不如直接操作DOM。组件化React和Vue都鼓励组件化应用程序。从本质上讲，建议您将应用程序拆分为功能明确的模块，并且每个模块之间可以以合适的方式进行通信。组件化的示例可以在本文中间找到：您可以将组件视为用户界面的小块。如果我要设计Facebook的UI，聊天窗口将是一个组件，评论将是另一个组件，而不断更新的好友列表将是一个组件。在Vue中，如果你遵循一定的规则，你可以使用单文件组件。//PastaItem.vue
