Vue与React两个框架的粗略区别对比

简单介绍

React--Facebook建立的JavaScript UI框架。它支撑着包括Instagram在内的大多数Facebook网站。React与当时流行的jQuery,Backbone.js和Angular 1等框架不一样，它的诞生改变了JavaScript的世界。其中最大的变化是React推广了Virtual DOM（虚拟DOM）并创造了新的语法——JSX，JSX容许开发者在JavaScript中书写HTML（译者注：即HTML in JavaScript）。

Vue致力解决的问题与React一致，但却提供了另一套解决方案。Vue使用模板系统（弱化的jsx），使其对现有应用的升级更加容易。这是由于模板用的就是普通的HTML，经过Vue来整合现有的系统是比较容易的，不须要总体重构。同时Vue的学习曲线相对react来讲更加容易。

类似之处

React与Vue有不少类似之处，如他们都是JavaScript的UI框架，专一于创造前端的富应用。不一样于早期的JavaScript框架“功能齐全”，Reat与Vue只有框架的骨架，其余的功能如路由、状态管理等是框架分离的组件。

• 二者都是用于建立UI的JavaScript库；
• 二者都快速轻便；
• 都有基于组件的架构；
• 都是用虚拟DOM；
• 均可放入单个HTML文件中，或者成为更复杂webpack设置中的模块；
• 都有独立但经常使用的路由器和状态管理库；

它们之间的最大区别是Vue一般使用HTML模板文件，而React则彻底是JavaScript。Vue有双向绑定语法糖。

不一样点

在Vue组件中，有几个观念和React相差比较大，我以为主要有如下这几点：

• Vue组件分为全局注册和局部注册，在react中都是经过import相应组件，而后模版中引用；

• props是能够动态变化的，子组件也实时更新，在react中官方建议props要像纯函数那样，输入输出一致对应，并且不太建议经过props来更改视图；

• 子组件通常要显示地调用props选项来声明它期待得到的数据。而在react中没必要需，另二者都有props校验机制；

• 每一个Vue实例都实现了事件接口，方便父子组件通讯，小型项目中不须要引入状态管理机制，而react必需本身实现；

• 使用插槽分发内容，使得能够混合父组件的内容与子组件本身的模板；

• 多了指令系统，让模版能够实现更丰富的功能，而React只能使用JSX语法；

• Vue增长的语法糖computed和watch，而在React中须要本身写一套逻辑来实现；

• react的思路是all in js，经过js来生成html，因此设计了jsx，还有经过js来操做css，社区的styled-component、jss等；而 vue是把html，css，js组合到一块儿，用各自的处理方式，vue有单文件组件，能够把html、css、js写到一个文件中，html提供了模板引擎来处理。

• react作的事情不多，不少都交给社区去作，vue不少东西都是内置的，写起来确实方便一些， 好比 redux的combineReducer就对应vuex的modules， 好比reselect就对应vuex的getter和vue组件的computed， vuex的mutation是直接改变的原始数据，而redux的reducer是返回一个全新的state，因此redux结合immutable来优化性能，vue不须要。

• react是总体的思路的就是函数式，因此推崇纯组件，数据不可变，单向数据流，固然须要双向的地方也能够作到，好比结合redux-form，组件的横向拆分通常是经过高阶组件。而vue是数据可变的，双向绑定，声明式的写法，vue组件的横向拆分不少状况下用mixin。

社区活跃度

从二者的github表现上来看

能够看出vue的star数量已是前端框架中最火爆的。从维护上来看，react是facebook在维护，而vue现阶段虽然也有了团队，但主要仍是尤雨溪在维护贡献代码，而且阿里巴巴开源的混合式框架weex也是基于vue的，因此咱们相信vue将来将会获得更多的人和团队维护。根据不彻底统计，包括饿了么、简书、高德、稀土掘金、苏宁易购、美团、天猫、荔枝FM、房多多、Laravel、htmlBurger等国内外知名大公司都在使用vue进行新项目的开发和旧项目的前端重构工做。

使用vue的公司

根据不彻底统计，包括饿了么、苏宁易购、美团、天猫、Laravel、htmlBurger等国内外知名大公司都在使用vue进行新项目的开发和旧项目的前端重构工做。

使用react的公司

UI生态

react有material-design，蚂蚁金服的ant-design等，vue有饿了么出品的element以及iview等。

总结

Vue的优点包括：

• 模板和渲染函数的弹性选择
• 简单的语法及项目建立
• 更快的渲染速度和更小的体积

React的优点包括：

• 更适用于大型应用和更好的可测试性
• 同时适用于Web端和原生App
• 更大的生态圈带来的更多支持和工具

而实际上，React和Vue都是很是优秀的框架，它们之间的类似之处多过不一样之处，而且它们大部分最棒的功能是相通的：

• 利用虚拟DOM实现快速渲染
• 轻量级
• 响应式组件
• 服务器端渲染
• 易于集成路由工具，打包工具以及状态管理工具
• 优秀的支持和社区

总结比较速览

特色	VUE	React
组件引用	分为全局注册和局部注册。	经过import相应组件，而后模版中引用。
数据流	1.父组件经过传递props来更新子组件视图，显示地调用props选项来声明它期待得到的数据。 2.vue是数据可变的，双向绑定，声明式的写法，vue组件的横向拆分不少状况下用mixin。	1.官方建议props要像纯函数那样，输入输出一致对应，并且不太建议经过props来更改视图。 2.react是总体的思路的就是函数式，因此推崇纯组件，数据不可变，单向数据流，固然须要双向的地方也能够作到，好比结合redux-form，组件的横向拆分通常是经过高阶组件。
模版	把html，css，js组合到一块儿，用各自的处理方式，vue有单文件组件，能够把html、css、js写到一个文件中，html提供了模板引擎来处理。	all in js，经过js来生成html，因此设计了jsx，还有经过js来操做css，社区的styled-component、js等。
事件	1.每一个Vue实例都实现了事件接口，方便父子组件通讯，小型项目中不须要引入状态管理机制。 2.Vue增长的语法糖computed和watch。	1.必须本身实现事件。 2.只能使用JSX语法写一套逻辑来实现。
状态管理	1.state对象并非必须的，数据由data属性在Vue对象中进行管理。 2.非父子组件之间嵌套过深的时候状态管理可引用vuex。	1.在react中是关键的概念，它是不可变的，在React中你须要使用setState()方法去更新状态。 2.非父子组件之间嵌套过深的时候状态管理可引用react-redux。
维护	由google前员工尤雨溪我的维护。	由facebook维护。
学习曲线	学习曲线平缓，内部封装不少语法糖	学习曲线稍复杂，更灵活
普及程度	截止到2018年10月29日 Github star 117604。	截止到2018年10月29日 Github star 114275。
使用场景	1.高级web单页面； 2.APP混合开发（阿里开源weex）； 3.微信小程序开发（美团开源mpvue、网易考拉开源megalo）； 4.结合electron开发桌面程序。	1.高级web页面； 2.APP混合开发（facebook开源react-native）； 3.微信小程序（京东开源taro）； 4.可结合electron开发桌面程序。
使用公司	根据不彻底统计，包括饿了么、苏宁易购、美团、天猫、Laravel、htmlBurger等国内外知名大公司都在使用vue进行新项目的开发和旧项目的前端重构工做。	蚂蚁金服、阿里巴巴、腾讯、百度、美团、滴滴、饿了么、京东、网易等。
UI生态	1.pc端：iview、element等； 2.h5端：有赞vant、mintui等； 3.混合开发：weexui，bui-weex； 4.微信小程序：iView Weapp、zanui；	1.pc端：Ant Design、Material-UI等； 2.h5端：Ant Design Mobile、weui等； 3.混合开发：teaset，react-native-elements； 4.微信小程序：iView Weapp、Taro UI；

参考文档

• Vue与React两个框架的区别和优点对比caibaojian.com/vue-vs-reac…
• Vue.js与React的全面对比 blog.csdn.net/CystalVon/a…