ReactReact和Vue有很多相似之处，它们都有：使用VirtualDOM提供Reactive和Composable视图组件。将注意力集中在核心库上，将路由和全局状态管理等其他功能留给相关库。由于有许多相似之处，我们将在本次比较中花费更多时间。这里我们既保证了技术内容的准确性，又兼顾了平衡性的考虑。我们需要承认React比Vue更好，比如更丰富的生态系统。相似之处React和Vue之间有很多相似之处。例如，它们都是专注于创建富前端应用程序的JavaScriptUI框架。与“功能齐全”的早期JavaScript框架不同，Reat和Vue只有框架的骨架，路由、状态管理等其他功能都是框架的独立组件。VirtualDOMVue.js（2.0版）和React之间最后的相似之处之一是它们都使用称为“虚拟DOM”的东西。所谓VirtualDOM，基本上就是它的名字的意思：虚拟DOM，DOM树的虚拟表示。它的诞生基于这样一个概念，即改变实际的DOM状态比改变JavaScript对象要昂贵得多。简单来说，VirtualDOM就是映射真实DOM的JavaScript对象。如果你需要改变任何元素的状态，你必须先在虚拟DOM上改变它，而不是直接改变真实的DOM。当发生变化时，会创建一个新的虚拟DOM对象，并计算新旧虚拟DOM之间的差异。然后将这些差异应用于真实的DOM。例子如下，我们可以看到下面列表的代码是如何用HTML写的：在JavaScript中，我们可以简单的为上面的例子创建一个对象的映射：真正的VirtualDOM会比上面的例子复杂一些，但它本质上是一个带有嵌套数组的本地对象。当一个新项目被添加到这个JavaScript对象时，一个函数会计算新旧虚拟DOM之间的差异，并将其反映在真实的DOM上。计算差异的算法是高性能框架的秘诀，React和Vue的实现略有不同。Vue声称它可以更快地计算出VirtualDOM的差异，因为它会在渲染过程中跟踪每个组件的依赖关系，而无需重新渲染整个组件树。对于React，每次应用程序的状态发生变化时，所有的子组件都会被重新渲染。当然，这可以通过shouldComponentUpdate生命周期方法来控制，但Vue将此视为默认优化。组件化React和Vue都鼓励组件化应用程序。从本质上讲，建议您将应用程序拆分为功能明确的模块，并且每个模块之间可以以合适的方式进行通信。在Vue中，如果遵循一定的规则，就可以使用单文件组件。正如你在上面的例子中看到的，HTML、JavaScript和CSS都写在一个文件中，你不再需要在.vue组件文件中引入CSS。在React语法中，JavaScript和JSX写在同一个组件文件中。Props在上面两个例子中，我们可以看到React和Vue都有props的概念，props是属性的简写。props是组件中的一个特殊属性，它允许父组件向子组件传递数据。在上面的JSX库组中，index、key、details、orders、addToOrder都是props，数据会下载到子组件PastaItem中。这在React中是必须的，它的“状态”依赖于“单一事实来源”。在Vue中，道具略有不同。它们也是在组件中定义的，但是Vue依赖于模板语法，你可以通过模板的循环功能更高效地展示传入的数据。构建工具React和Vue都有自己的构建工具，您可以使用它们快速设置开发环境。React可以使用CreateReactApp(CRA)，而Vue对应的是vue-cli。这两种工具都允许您根据最佳实践获得项目模板集。由于CRA有很多选项，使用起来可能有点麻烦。这个工具会强制你使用Webpack和Babel。另一方面，vue-cli有一个模板列表可供选择，可以按需创建不同的模板，使用起来更加灵活。其实这两个工具都非常好用，都可以给你搭建一个很好的环境。如果你可以不配置Webpack，Jeff和我认为这是一件很棒的事情。Chrome开发工具React和Vue都有很棒的Chrome扩展来帮助你发现错误。他们检查您的应用程序并让您查看Vue或React中的更改。您还可以在应用程序中查看状态并实时查看更新。React开发工具：https://cdn.deliciousbrains.com/content/uploads/2017/06/15151112/react-devtools.mp4Vue开发工具：https://cdn.deliciousbrains.com/content/uploads/2017/06/15151111/vue-devtools.mp4Vue和React的主要区别最后一点相似但又略有不同的是它们的配套框架的处理方式。相同的是，这两个框架都专注于UI层，路由和状态管理等其他功能由配套框架处理。不同之处在于它们与各自的配套框架的关系。Vue的核心团队维护着vue-router和vuex，它们都作为官方推荐存在。React的react-router和react-redux是由社区成员维护的，并不是官方维护的。TemplatesvsJSXReact和Vue最大的区别就是模板的写法。Vue鼓励您编写近似于常规HTML的模板。它的编写非常接近标准HTML元素，但具有更多属性。这些属性也可以用在单文件组件中，尽管它需要在构建时将组件转换为有效的JavaScript和HTML。Vue鼓励您使用HTML模板进行渲染，使用类似Angular的方法来输出动态内容。因此，Vue可以通过将原有模板集成到新的Vue模板中，轻松地为旧应用程序提供升级。它还使新手很容易适应它的语法。React推荐你所有的模板都使用通用的JavaScript语法扩展-JSX来编写，但这需要传统前端开发人员进行相应的学习。同样的代码，用JSX写成如下：React/JSX乍一看似乎很冗长，但是使用JavaScript代替模板进行开发，给了开发者很多编程能力。状态管理与对象属性如果您熟悉React，就会知道应用程序中的状态是一个关键(React)概念。还有一些配套框架旨在管理大型状态对象，例如Redux。此外，React应用程序中的状态对象是不可变的，这意味着它不能直接更改，在React中你需要使用setState()方法来更新状态。在Vue中，state对象不是必须的，数据在Vue对象中通过data属性进行管理。在Vue中，不需要使用setState()等方法来改变它的状态。在Vue对象中，data参数是应用程序中数据的保存器。但恶心的是React有个霸王条款：Facebook拒绝修改React开源许可。AngularjsVue的某些语法与AngularJS非常相似（例如v-if与ng-if）。因为AngularJS是Vue早期开发的灵感来源。但是，AngularJS中存在的许多问题在Vue中都得到了解决。Angular1、MVVM（模型）（视图）（View-model）2、模块化（Module）控制器（Contoller）DependencyInjection：3、双向数据绑定：接口的操作可以实时反映在数据中，数据的变化可以实时显示在界面上。4.Instruction(ng-clickng-modelng-hrefng-srcng-if...)5.ServiceService($compile$filter$interval$timeout$http...)双向数据绑定的实现uses$scope变量的脏值检测，使用$scope.$watch(viewtomodel)，$scope.$apply(modeltoview)检测，内部调用digest，当然你也可以直接调用$scope.$digest做脏检查。值得注意的是，当数据变化频繁时，脏检测会消耗大量的浏览器性能。官方最大脏检测值为2000个数据。Vuevue.js官网：它是一个用于构建用户界面的渐进式框架。与其他重量级框架不同，Vue旨在自下而上地进行增量开发。Vue的核心库只专注于视图层，非常容易学习和与其他库或现有项目集成。另一方面，Vue完全有能力驱动使用Vue生态系统支持的单文件组件和库开发的复杂单页应用程序。Vue.js的目标是使用尽可能简单的API启用反应式数据绑定和组合视图组件。（1）模块化，目前最火的方式是在项目中直接使用ES6模块化，结合Webpack进行项目打包（2）组件化，创建一个.vue后缀的单个组件文件，包括模板（html代码）、脚本（es6code),style(cssstyle)(3)routing,vue很小，最小源码压缩后72.9kb，gzip压缩后只有25.11kb，比Angular小144kb，可以使用需要的库插件自己。类似路由插件（Vue-router）、Ajax插件（vue-resource）等。下面我们从几个方面来比较一下Vue.js和Angular.js的区别。TypeScriptAngular实际上必须用TypeScript开发，因为它的文档和学习资源几乎都是面向TS的。TS有很多明显的好处——静态类型检查在大型应用程序中非常有用，对于有Java和C#背景的开发人员来说也非常高效。然而，并不是每个人都想使用TS——在中小型项目中，引入TS可能不会带来太多明显的优势。在这些情况下，Vue将是更好的选择，因为在没有TS的情况下使用Angular可能具有挑战性。***，虽然Vue和TS的结合可能没有Angular那么深入，但我们也提供了官方的类型声明和组件装饰器，知道大量用户在生产环境中使用Vue+TS组合。我们也积极与微软的TS/VSCode团队合作，旨在为Vue+TS用户提供更好的类型检查和IDE开发体验。大小和性能在性能方面，这两个框架都非常快，我们没有足够的实际应用数据来下结论。如果实在想看一些数据，可以参考这个第三方benchmark。单从这个跑分来看，Vue似乎比Angular快。在大小方面，最近的Angular版本使用AOT和tree-shaking技术使最终代码大小小得多。但即便如此，包含Vuex+VueRouter的Vue项目（压缩后30kb）仍然比使用这些优化的angular-cli生成的默认项目大小（~130kb）小得多。灵活性Vue比Angular更灵活。Vue官方提供了构建工具来帮助您构建项目，但它并不限制您组织应用程序代码的方式。有些人可能喜欢有严格的代码组织规范，但有些开发人员喜欢更灵活和自由的方式。学习曲线要学习Vue，您只需要具备良好的HTML和JavaScript基础。有了这些基本技能，您可以通过阅读指南快速进入开发阶段。Angular有一个非常陡峭的学习曲线——作为一个框架，它的API区域比Vue大得多，所以你需要了解更多的概念才能开始高效地工作。当然，Angular本身的复杂性是因为它的设计目标只是针对大型和复杂的应用程序；但不可否认的是，这也使得它对没有经验的开发者相当不友好。但是即使有这么多好处，Vue相对于Angular2还是有很多不足：作者：曹知乎链接：https://www.zhihu.com/question/40975678/answer/133505411来源：知乎版权归作者所有。商业转载请联系作者授权，非商业转载请注明出处。Angular2原生Form支持：Angular2原生Form模块非常强大。除了双向绑定等基本功能外，还可以通过编程API来控制dom元素的表单行为。还有一个提供自定义验证器的整形API。此时，Vue只有v-model和第三方库。对于后台等重表单应用，Ng2还是有优势的。依赖注入不管你喜不喜欢DI，这都是Angular2的一大特色。有DI可以在不改变代码结构的情况下完成功能替换。（例如，桌面端和移动端有不同的功能，可以通过注入不同的服务来实现，同时共享相同的模板和指令）。Vue要求程序员规划自己的代码组织以支持共享组件。DI也可用于模块本地状态等功能。比如一个视频播放控件有几个子组件来完成，子组件需要共享一个状态。此时Angular2有一个本地服务注入模式。另一方面，Vue没有官方推荐。向后兼容标准Angular2在一些细节上对标准有更好的支持。比如在listdiffer算法中，Angular2可以支持实现Symbol.iterator的对象，而Vue只能支持Array。对于Observable和Promise，Angular2在应用程序的各个地方都有支持（异步管道），甚至在模板级别。而Vue需要vue-rx等第三方库的支持。Angular2组件有shadowdom实现选项，但Vue目前没有。测试Angular2从一开始就设计了如何测试组件，虽然Vue组件很容易写测试，但是并没有官方推荐的标准（当然view是否需要测试还有待商榷）。另外，Angular2还有一些小功能比如检查模板的类型安全（即模板可以保证编译器不引用模型的未定义变量），但是AoT本身好像不太稳定，所以不能算优势。对TS的支持对Angular也是有好处的，当然前提是你喜欢TS。EmberEmber是一个一体化框架。它提供了大量的约定，一旦你熟悉了它们，开发就会变得非常高效。然而，这也意味着高学习曲线和不灵活性。这意味着在框架和库（加上一组松散耦合的工具）之间做出权衡。后者更自由，但也需要您做出更多架构决策。也就是说，我们最好的比较是Vue核心与Ember的模板和数据模型层之间的比较：Vue在纯JavaScript对象之上构建响应，提供自动计算的属性。在Ember中，您需要将所有内容放入Ember对象中，并手动声明计算属性的依赖项。Vue的模板语法允许完整的JavaScript表达式，而Handlebars的语法与辅助函数相比非常有限。在性能方面，Vue比Ember好很多，甚至比Ember2.x的***Glimmer引擎。Vue可以自动批量更新，而Ember在关键性能场景下需要人工管理。KnockoutKnockout是MVVM领域的先驱，跟踪依赖关系。它的反应系统也与Vue非常相似。其在浏览器支持等方面的表现也令人印象深刻。它只能支持IE6，而Vue只能支持IE9。随着时间的推移，淘汰赛已经放缓，并且变得有点老了。例如，它的组件系统缺少一个完整的生命周期事件方法，尽管这些在现在很普遍。而且它的方法相对于Vue调用子组件接口的方法来说有点繁琐。如果你有兴趣研究，你也会发现两者在界面设计上有着不同的理念。这可以反映在每个人创建的简单待办事项列表中。也许有点主观，但很多人认为Vue的API接口更简单、更优雅。PolymerPolymer是另一个由Google赞助的项目，它实际上是Vue的灵感来源。Vue的组件大致可以类比Polymer的自定义元素，两者的开发风格相似。最大的区别是Polymer基于最新版本的WebComponents标准，需要重量级的polyfills帮助工作（性能下降），浏览器本身不支持这些特性。相比之下，Vue在支持IE9时不需要依赖polyfills来工作。在Polymer1.0版本中，团队对数据绑定系统的使用非常有限，以补偿性能。例如，Polymer中唯一支持的表达式是布尔否定和单一方法调用，其计算方法实现不是很灵活。Polymer自定义元素是使用HTML文件创建的，这限制了JavaScript/CSS（以及现代浏览器通常支持的语言功能）的使用。相比之下，Vue的单文件组件可以让你轻松使用ES2015和你想要使用的CSS预编译器。部署到生产环境时，Polymer建议使用HTML导入加载所有资源。而这就需要服务端和客户端都支持Http2.0协议，浏览器就实现了这个标准。这是否可能取决于您的目标受众和部署环境。如果情况不好，则必须使用Vulcanizer工具包裹Polymer元素。对此，Vue可以结合异步组件的特点和Webpack的代码拆分特点，实现懒加载（lazy-loaded）。这也确保了与旧浏览器的兼容性和加载速度更快。将Vue和WebComponent标准进行深层次的融合也是完全可行的，比如使用CustomElements和ShadowDOM样式封装。但是，我们目前还在等待相关标准成熟，然后在各大浏览器中广泛使用之后，我们才会做出认真的实施承诺。RiotRiot2.0提供了类似的基于组件的开发模型（在Riot中称为Tags），它提供了一个小巧而优雅的API。Riot和Vue在设计理念上可能有很多相似之处。尽管Vue比Riot重一点，但Vue有许多显着的优势：过渡系统。Riot还没有提供。更强大的路由机制，Riot的路由API是最小的。更好的性能。Riot使用DOM树遍历而不是虚拟DOM，但实际上使用脏检查，因此遇到与AngularJS相同的性能问题。支持更成熟的工具。Vue为webpack和Browserify提供官方支持，而Riot则依赖社区构建集成系统。作者：code-xzh原文链接
