Vue与React从某些方面来说很相似，通过两个框架的学习，从以下各方面进行了对比，加深了对这两个框架的认知。
1、构建工具
React和Vue都有自己的构建工具，你可以使用它快速搭建开发环境。React可以使用CreateReactApp(CRA)，而Vue对应的则是vue-cli。两个工具都能让你得到一个根据最佳实践设置的项目模板。由于CRA有很多选项，使用起来会稍微麻烦一点。这个工具会逼迫你使用Webpack和Babel。而vue-cli则有模板列表可选，能按需创造不同模板，使用起来更灵活一点。
2、数据绑定
2.1Vue中有关数据绑定的部分
vue是双向绑定，Vue.js最核心的功能有两个，一是响应式的数据绑定系统，二是组件系统。所谓双向绑定，指的是vue实例中的data与其渲染的DOM元素的内容保持一致，无论谁被改变，另一方会相应的更新为相同的数据。这是通过设置属性访问器实现的。在vue中，与数据绑定有关的有插值表达式、指令系统、*Class和Style、事件处理器和表单空间、ajax请求和计算属性2.1.1插值表达式插值和指令又称为模板语法-数据绑定最常见的形式就是使用“Mustache”语法(双大括号)的文本插值-Mustache语法不能作用在HTML特性上，遇到这种情况应该使用v-bind指令
2.1.2指令vue中的指令很方便，指令(Directives)是带有v-前缀的特殊属性。指令属性的值预期是单个JavaScript表达式(v-for是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。
vue中的12个指令：v-bind,v-once,v-model,v-text,v-html,v-on,v-if,v-else,v-show,v-for,v-pre,v-clock
注：关于vue的数据双向绑定和单向数据流Vue的依赖追踪是【原理上不支持双向绑定，v-model只是通过监听DOM事件实现的语法糖】
vue的依赖追踪是通过Object.defineProperty把data对象的属性全部转为getter/setter来实现的；当改变数据的某个属性值时，会触发set函数,获取该属性值的时候会触发get函数，通过这个特性来实现改变数据时改变视图；也就是说只有当数据改变时才会触发视图的改变，反过来在操作视图时，只能通过DOM事件来改变数据，再由此来改变视图，以此来实现双向绑定
双向绑定是在同一个组件内，将数据和视图绑定起来，和父子组件之间的通信并无什么关联；组件之间的通信采用单向数据流是为了组件间更好的解耦，在开发中可能有多个子组件依赖于父组件的某个数据，假如子组件可以修改父组件数据的话，一个子组件变化会引发所有依赖这个数据的子组件发生变化，所以vue不推荐子组件修改父组件的数据，直接修改props会抛出警告
2.2react没有数据双向绑定react是单向数据流react中通过将state（Model层）与View层数据进行双向绑定达数据的实时更新变化，具体来说就是在View层直接写JS代码Model层中的数据拿过来渲染，一旦像表单操作、触发事件、ajax请求等触发数据变化，则进行双同步2.2.1事件处理React元素的事件处理和DOM元素的很相似。但是有一点语法上的不同:
React事件绑定属性的命名采用驼峰式写法，而不是小写。如果采用JSX的语法你需要传入一个函数作为事件处理函数，而不是一个字符串(DOM元素的写法)在React中另一个不同是你不能使用返回false的方式阻止默认行为。你必须明确的使用preventDefault。当你使用ES6class语法来定义一个组件的时候，事件处理器会成为类的一个方法。一般需要显式的绑定this，例如
this.handleClick=this.handleClick.bind(this);
3.组件化以及组件数据流
3.1.1组件之间的通信父子组件数通信父与子之间通props属性进行传递子与父之间，父组件定义事件，子组件触发父组件中的事件时，通过实参的形式来改变父组件中的数据来通信即：-*父组件更新组件状态—–props—–>子组件更新-*子组件更新父组件状态—–需要父组件传递回调函数—–>子组件调用触发
非父子组件之间的通信，嵌套不深的非父子组件可以使共同父组件，触发事件函数传形参的方式来实现兄弟组件：（1）按照React单向数据流方式，我们需要借助父组件进行传递，通过父组件回调函数改变兄弟组件的props。-其实这种实现方式与子组件更新父组件状态的方式是大同小异的。
（2）当组件层次很深的时候，在这里，React官方给我们提供了一种上下文方式，可以让子组件直接访问祖先的数据或函数，无需从祖先组件一层层地传递数据到子组件中。
3.1.2组件的生命周期construtor()//创建组件componentWillMount()//组件挂载之前componentDidMount()//组件挂载之后componentWillReceiveProps()//父组件发生render的时候子组件调用该函数shouldComponentUpdate()//组件挂载之后每次调用setState后都会调用该函数判断是否需要重新渲染组件，默认返回truecomponentDidUpdate()//更新render()//渲染，react中的核心函数componentWillUnmount()//组件被卸载的时候调用，一般在componentDidMount注册的事件需要在这里删除
3.2vue中的组件和数据流
3.2.1组件化应用构建
2.子向父-使用自定义事件-每个Vue实例都接入了一个事件接口(eventsinterface)，也就是说，这些Vue实例可以做到：-使用on(eventName)监听一个事件使用on(eventName)监听一个事件使用emit(eventName)触发一个事件
3.非父子组件通信-可以使用一个空的Vue实例作为一个事件总线中心(centraleventbus)，用emit触发事件，emit触发事件，on监听事件
3.2.4单向数据流单向数据流极简示意图：
4.状态管理
4.1react中的状态管理：Flux
4.2vue中的状态管理vuexvuex借鉴了Flux、Redux、和TheElmArchitecture。与其他模式不同的是，Vuex是专门为Vue.js设计的状态管理库，以利用Vue.js的细粒度数据响应机制来进行高效的状态更新。这使得它能够更好地和Vue进行整合，同时提供简洁的API和改善过的开发体验。组件不允许直接修改属于store实例的state，而应执行action来分发(dispatch)事件通知store去改变，我们最终达成了Flux架构。这样约定的好处是，我们能够记录所有store中发生的state改变，同时实现能做到记录变更(mutation)、保存状态快照、历史回滚/时光旅行的先进的调试工具。
每一个Vuex应用的核心就是store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态
Vuex和单纯的全局对象有以下两点不同：
Vuex的状态存储是响应式的。当Vue组件从store中读取状态的时候，若store中的状态发生变化，那么相应的组件也会相应地得到高效更新。
你不能直接改变store中的状态。改变store中的状态的唯一途径就是显式地提交(commit)mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。
State
Vuex使用单一状态树——是的，用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源(SSOT)”而存在。这也意味着，每个应用将仅仅包含一个store实例。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。这也意味着，每个应用将仅仅包含一个store实例。Getters从state中获取状态值，有时候我们需要从store中的state中派生出一些状态，例如对列表进行过滤并计数。
Mutation更改Vuex的store中的状态的唯一方法是提交mutation。Vuex中的mutation非常类似于事件：每个mutation都有一个字符串的事件类型(type)和一个回调函数(handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受state作为第一个参数。你不能直接调用一个mutationhandler。这个选项更像是事件注册：“当触发一个类型为increment的mutation时，调用此函数。”要唤醒一个mutationhandler，你需要以相应的type调用store.commit方法Action
Action类似于mutation，不同在于：
Action提交的是mutation，而不是直接变更状态。
Action可以包含任意异步操作。dispatch分发actionModule
由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store对象就有可能变得相当臃肿。Vuex允许我们将store分割成模块（module）。每个模块拥有自己的state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割
Vuex示意图
5.路由两者的路由很相似，都是利用了组件化思想5.1react中的路由在路由库的问题上，React选择把问题交给社区维护，因此创建了一个更分散的生态系统。但相对的，React的生态系统相比Vue更加繁荣。react中，需要引入react-router库，使用时，路由器Router就是React的一个组件。Router组件本身只是一个容器，真正的路由要通过Route组件定义。Route组件定义了URL路径与组件的对应关系。你可以同时使用多个Route组件。
HTML中：HelloApp!
操作界面时，要尽量减少对DOM的操作，Vue和React都使用虚拟DOM来实现，并且两者工作一样好。尽量减少除DOM操作以外的其他操作。（vue和react的不同）6.1react视图渲染React的渲染建立在VirtualDOM上——一种在内存中描述DOM树状态的数据结构。当状态发生变化时，React重新渲染VirtualDOM，比较计算之后给真实DOM打补丁。
VirtualDOM提供了函数式的方法描述视图，它不使用数据观察机制，每次更新都会重新渲染整个应用，因此从定义上保证了视图与数据的同步。它也开辟了JavaScript同构应用的可能性。
在超大量数据的首屏渲染速度上，React有一定优势，因为Vue的渲染机制启动时候要做的工作比较多，而且React支持服务端渲染。
元素是构成React应用的最小单位。元素用来描述你在屏幕上看到的内容，与浏览器的DOM元素不同，React当中的元素事实上是普通的对象，ReactDOM可以确保浏览器DOM的数据内容与React元素保持一致。
我们用React开发应用时一般只会定义一个根节点。但如果你是在一个已有的项目当中引入React的话，你可能会需要在不同的部分单独定义React根节点。我们将元素传入一个名为ReactDOM.render()的方法来将其渲染到页面上，页面上就会显示该元素。组件渲染-当React遇到的元素是用户自定义的组件，它会将JSX属性作为单个对象传递给该组件,这个对象称之为“props”。
6.2vue视图渲染Vue通过建立一个虚拟DOM对真实DOM发生的变化保持追踪。
vue渲染的过程如下：
Vue提供了Vue-cli脚手架，能让你非常容易地构建项目，包含了Webpack，Browserify，甚至nobuildsystem。9.HTML&&CSS在React中，一切都是JavaScript。不仅仅是HTML可以用JSX来表达，现在的潮流也越来越多地将CSS也纳入到JavaScript中来处理。这类方案有其优点，但也存在一些不是每个开发者都能接受的取舍。-Vue的整体思想是拥抱经典的Web技术，并在其上进行扩展。9.1react9.1.1JSX在React中，所有的组件的渲染功能都依靠JSX。JSX是使用XML语法编写JavaScript的一种语法糖。JSX,一种JavaScript的语法扩展。我们推荐在React中使用JSX来描述用户界面。JSX乍看起来可能比较像是模版语言，但事实上它完全是在JavaScript内部实现的。
JSX本身也是一种表达式，在编译之后呢，JSX其实会被转化为普通的JavaScript对象。这也就意味着，你其实可以在if或者for语句里使用JSX，将它赋值给变量，当作参数传入，作为返回值都可以JSX说是手写的渲染函数有下面这些优势：你可以使用完整的编程语言JavaScript功能来构建你的视图页面。比如你可以使用临时变量、JS自带的流程控制、以及直接引用当前JS作用域中的值等等。开发工具对JSX的支持相比于现有可用的其他Vue模板还是比较先进的(比如，linting、类型检查、编辑器的自动完成)。9.1.2组件作用域内的CSS除非你把组件分布在多个文件上(例如CSSModules)，CSS作用域在React中是通过CSS-in-JS的方案实现的(比如styled-components、glamorous和emotion)。这引入了一个新的面向组件的样式范例，它和普通的CSS撰写过程是有区别的。另外，虽然在构建时将CSS提取到一个单独的样式表是支持的，但bundle里通常还是需要一个运行时程序来让这些样式生效。当你能够利用JavaScript灵活处理样式的同时，也需要权衡bundle的尺寸和运行时的开销。
9.2vue
服务端渲染路线：1.请求一个html->2.服务端请求数据(内网请求快)->3.服务器初始渲染（服务端性能好，较快）->4.服务端返回已经有正确内容的页面->5.客户端请求js/css文件->6.等待js文件下载完成->7.等待js加载并初始化完成->8.react-dom(客户端)把剩下一部分渲染完成(内容小，渲染快)
11.1reactReact的虚拟DOM是其可被用于服务端渲染的关键。首先每个ReactComponent在虚拟DOM中完成渲染，然后React通过虚拟DOM来更新浏览器DOM中产生变化的那一部分，虚拟DOM作为内存中的DOM表现，为React在Node.js这类非浏览器环境下的吮吸给你提供了可能，React可以从虚拟DoM中生成一个字符串。而不是跟新真正的DOM，这使得我们可以在客户端和服务端使用同一个ReactComponent。
React提供了两个可用于服务端渲染组件的函数：React.renderToString和React.render-ToStaticMarkup。在设计用于服务端渲染的ReactComponent时需要有预见性，考虑以下方面。
选取最优的渲染函数。如何支持组件的异步状态。如何将应用的初始化状态传递到客户端。哪些生命周期函数可以用于服务端的渲染。如何为应用提供同构路由支持。单例、实例以及上下文的用法。11.2vue1.什么是服务器端渲染（SSR）？
Vue.js是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出Vue组件，进行生成DOM和操作DOM。然而，也可以将同一个组件渲染为服务器端的HTML字符串，将它们直接发送到浏览器，最后将静态标记”混合”为客户端上完全交互的应用程序。
服务器渲染的Vue.js应用程序也可以被认为是”同构”或”通用”，因为应用程序的大部分代码都可以在服务器和客户端上运行。
12.附：react理念1.把UI图划分出组件层级2.用React创建一个静态版本传入数据模型，渲染UI但没有任何交互。最好把这些过程解耦，因为创建一个静态版本更多需要的是码代码，不太需要逻辑思考，而添加交互则更多需要的是逻辑思考，不是码代码。在创建静态版本的时候不要使用state。你可以自顶向下或者自底向上构建应用。也就是，你可以从层级最高的组件开始构建(即FilterableProductTable开始)或层级最低的组件开始构建(ProductRow)。在较为简单的例子中，通常自顶向下更容易，而在较大的项目中，自底向上会更容易并且在你构建的时候有利于编写测试。React的单向数据流(也叫作单向绑定)保证了一切是模块化并且是快速的。3.定义UI状态的最小(但完整)表示想想实例应用中的数据，让我们来看看每一条，找出哪一个是state。每个数据只要考虑三个问题：
确定每一个需要这个state来渲染的组件。找到一个公共所有者组件(一个在层级上高于所有其他需要这个state的组件的组件)这个公共所有者组件或另一个层级更高的组件应该拥有这个state。如果你没有找到可以拥有这个state的组件，创建一个仅用来保存状态的组件并把它加入比这个公共所有者组件层级更高的地方。5.添加反向数据流总结一下，我们发现，-Vue的优势包括：-模板和渲染函数的弹性选择-简单的语法及项目创建-更快的渲染速度和更小的体积-React的优势包括：-更适用于大型应用和更好的可测试性-同时适用于Web端和原生App-更大的生态圈带来的更多支持和工具-而实际上，React和Vue都是非常优秀的框架，它们之间的相似之处多过不同之处，并且它们大部分最棒的功能是相通的：-利用虚拟DOM实现快速渲染-轻量级-响应式和组件化-服务器端渲染-易于集成路由工具，打包工具以及状态管理工具-优秀的支持和社区