react与vue对比
最近公司打算开发一个新项目，讨论了一下使用哪种框架进行开发，然后我就突发想写这么一篇文章来对比一下react和vue的优缺点，同时有很多公司在面试的时候也会问react和vue的优缺点对比，也希望这篇文章能够帮助有需要的人。
首先说明一下公司为什么不选用angular这个框架，首先是因为相对其他2个框架，anguar的使用难度有点大，什么依赖注入，提供者等等这些东西让人觉得angular更加偏向于后台。
然后是因为angular使用的是typescript这么语言，公司会使用这种语言的前端并不多，更别说精通了。其次是文档方面，国内的用户需要翻墙才能访问他的官方文档。
下面我就说一下react和vue那些优缺点了，这里我并不会说像虚拟DOM这些网上可以一搜一大把的东西，因为这没什么必要去重复造轮子，大家都看过的东西再写下去就没什么意义了，在这里我更加喜欢对比一些细节的问题。
vue使用的是.vue文件，react使用的是.js或.jsx文件
.vue文件分三层结构，分别是template，script，style。template是负责写html的，script是负责写js的，style是负责写css的。这三层结构分层很清晰，各自负责不同的内容，使得html，js，css耦合度不高。
.js或者.jsx则是使用es6的class语法。html，js，css需要混合在一起写，所以html，js，css的耦合度比较高。
所以相比而言，.vue文件会比.js或.jsx文件好。
html模板
首先需要说明的是这里说的html并不是指真正的html，这里这样说是因为react和vue的模板跟html相似，也是为了大家方便理解，而且网上也很多人喜欢说成是html。
在vue中，html是写在template中，在模板中可以使用v-if，v-for等指令，在指令中使用变量是不需要{{}}的，直接在单引号或者双引号中使用就行了，在指令外则需要使用{{}}。最重要的是vue的模板和js是完全分离的，当你渲染一个数组时，你完全不依赖js，你只需使用指令v-for即可。
在react中，只要是符合jsx语法规范的html你可以写在任何地方，这相比vue会更加自由，但是你无法像vue一样使用v-for等指令，这意味着当你要渲染一个数组的时候，你需要使用js语法去遍历这个数组，然后渲染出对应的html。当你要是用一个变量时，你是要使用{}进行包裹的。而且有些关键字是不能出现在html中，比如class，你要写成className。
所以，在html模板使用方面，vue相对react会好一点。因为vue的html与js耦合度相对比较低。
css方面
在vue中，css是写在style中。style中有一个属性叫scoped，他的作用是将css样式模块化，意思就是包裹在style标签中的样式只在当前文件中有效，不影响外部样式，产生全局css污染，这对于编写一个vue组件是非常有帮助的，因为我们并不希望组件内的样式对外部组件产生影响。当你需要使用less或者sass这种css预处理语言时，你只需要下载对应的loader，然后在style标签加上lang="less"或者lang=“sass”，就可以轻松使用less或者sass，无需去修改配置（当然这种做法的前提是建立在你用vue的脚手架创建的项目，如果是你自己搭建项目环境，你还是需要手动修改配置）。
在react中，你想使用css有2种方法，一是写行内样式，二是创建一个css文件，并把它引进来。首先是使用行内样式，他的缺点是造成html臃肿，当你需要为多个li元素添加样式的时候就显得轻而易见了，同时也增加了文件的体积，不利于前端的性能优化。然后是创建一个css文件，并把它引进来。这种方法会产生全局css污染，当你要编写一个组件的时候，这种方法明显是不可取的。当然你可以利用webpack构建工具使用css-loader将css模块化，这方面就需要你有一点webpack知识了，这对于不熟悉webpack的人来说明显不可取的。
所以在css方面，vue更胜一筹
组件化方面
组件化一开始是react提出来的，尽管react的书写方式耦合度比较高，但是它采用的是es6的class写法，这对于一些后台转前端或者喜欢面向对象编程的同学来说可能会比较容易接受，并且在组件的继承方面，react只需要使用关键字extends即可轻松继承，而且创建高阶组件的时候也会比vue轻松地多，更容易让人理解。
vue在一开始出现的时候是并不支持组件化的，只是后面慢慢支持了组件化这个功能，在继承组件的时候，vue需要使用vue.extend()得到继承的实例，并且通过new关键字即可使用，这对于编写函数式组件是非常有用的。
所以在组件化方面，我认为react会好一点，组件化就是react的核心概念，没有组件化就没有react。
数据流方面
Vue默认是支持双向数据流的，即视图的改变会影响数据模型，数据模型的改变会影响视图，同时vue的组件也是支持双向数据流绑定的。但是这使得对数据的管理变得更加复杂了。
Reatc只支持单向数据流，你要是想实现双向数据流你就要自己手动去实现，单向数据流也是react的核心概念之一，这种单向数据流可以很方便的观察数据的流向，使得对数据的管理变得很方便
在数据流方面，我更喜欢单向数据流吧，因为单向的流向会很清晰数据跑到哪里去了
状态管理方面
vue使用的是vuex，vuex不仅书写方便，而且vuex还提供不同方法使得vuex的使用也变得很简单。但是vuex的书写并不严谨，你可以在mutations之外去修改的他的状态，即使这是不可取的，vuex也会报出警告，但是并不影响你在mutations之外去修改vuex的状态，这样会使得你不知道在什么时候，在哪里修改了vuex的状态。
react使用的是redux，redux需要各种reducer，action才能改变状态，redux的书写非常严谨，你只能通过dispatch去修改redux的状态，redux的每一步都必须遵守它的规则，否则你将无法修改它的状态。你将可以很清晰的知道你在哪里，在什么时候修改了redux的状态。
对于状态管理方面，我更喜欢的是redux的严谨
其他方面
Vue框架本身也提供了很多很好用的功能和api，比如动画，keep-alive组件等等，这使得你的开发更加简洁灵活，而且vue的官方文档对于国内的人来说也是非常的友好的。
而react相对vue来说就没有这么多功能，因为react更加专注的是视图层，并没有太多花里胡哨的东西。你一进去react的官方文档看一下就会发现文档也就只有那点东西，一目了然。
最终，公司还是选择了使用vue这个框架。但是技术选型没什么对和错，只有合不合适，具体要从你的需求出发，选择合适的框架才能是你的开发效率变得更快。