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；