Vue与React从某些方面来说很相似，通过两个框架的学习，从以下各方面进行了对比，加深了对这两个框架的认知。
1、构建工具
React和Vue都有自己的构建工具，你可以使用它快速搭建开发环境。React可以使用Create React App (CRA)，而Vue对应的则是vue-cli。两个工具都能让你得到一个根据最佳实践设置的项目模板。由于CRA有很多选项，使用起来会稍微麻烦一点。这个工具会逼迫你使用Webpack和Babel。而vue-cli则有模板列表可选，能按需创造不同模板，使用起来更灵活一点。
2、数据绑定
2.1 Vue中有关数据绑定的部分
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不推荐子组件修改父组件的数据，直接修改props会抛出警告
2.2 react没有数据双向绑定 react是单向数据流 react中通过将state（Model层）与View层数据进行双向绑定达数据的实时更新变化，具体来说就是在View层直接写JS代码Model层中的数据拿过来渲染，一旦像表单操作、触发事件、ajax请求等触发数据变化，则进行双同步 2.2.1事件处理React 元素的事件处理和 DOM元素的很相似。但是有一点语法上的不同:
React事件绑定属性的命名采用驼峰式写法，而不是小写。如果采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符串(DOM元素的写法)在 React 中另一个不同是你不能使用返回 false 的方式阻止默认行为。你必须明确的使用 preventDefault。当你使用 ES6 class 语法来定义一个组件的时候，事件处理器会成为类的一个方法。一般需要显式的绑定this，例如
3.组件化以及组件数据流
3.1.1 组件之间的通信 父子组件数通信 父与子之间通props属性进行传递 子与父之间，父组件定义事件，子组件触发父组件中的事件时，通过实参的形式来改变父组件中的数据来通信即： - * 父组件更新组件状态 —–props—–> 子组件更新 - * 子组件更新父组件状态 —–需要父组件传递回调函数—–> 子组件调用触发
非父子组件之间的通信，嵌套不深的非父子组件可以使共同父组件，触发事件函数传形参的方式来实现 兄弟组件： （1） 按照React单向数据流方式，我们需要借助父组件进行传递，通过父组件回调函数改变兄弟组件的props。 - 其实这种实现方式与子组件更新父组件状态的方式是大同小异的。
（2） 当组件层次很深的时候，在这里，React官方给我们提供了一种上下文方式，可以让子组件直接访问祖先的数据或函数，无需从祖先组件一层层地传递数据到子组件中。
3.1.2 组件的生命周期 construtor() //创建组件 componentWillMount() //组件挂载之前 componentDidMount() // 组件挂载之后 componentWillReceiveProps() // 父组件发生render的时候子组件调用该函数 shouldComponentUpdate() // 组件挂载之后每次调用setState后都会调用该函数判断是否需要重新渲染组件，默认返回true componentDidUpdate() // 更新 render() //渲染，react中的核心函数 componentWillUnmount() //组件被卸载的时候调用，一般在componentDidMount注册的事件需要在这里删除
3.2 vue中的组件和数据流
3.2.1 组件化应用构建
3.2.3 组件之间的通信 Vue默认的是单向数据流，这是Vue直接提出来说明的，父组件默认可以向子组件传递数据，但是子组件向父组件传递数据就需要额外设置了。 Vue 也支持双向绑定，默认为单向绑定，数据从父组件单向传给子组件。在大型应用中使用单向绑定让数据流易于理解。 父子组件之间的数据通信是通过Prop和自定义事件实现的，而非父子组件可以使用订阅/发布模式实现（类似于Angualr中的非父子指令之间的通信），再复杂一点也是建议使用状态管理（vuex）。 在 Vue 中，父子组件之间的关系可以概述为：props 向下，events 向上。父组件通过 props 向下传递数据给子组件，子组件通过 events 发送消息给父组件。 1.父向子 - 每个组件实例都有自己的孤立隔离作用域。也就是说，不能（也不应该）直接在子组件模板中引用父组件数据。要想在子组件模板中引用父组件数据，可以使用 props 将数据向下传递到子组件。 - 每个 prop 属性,都可以控制是否从父组件的自定义属性中接收数据。子组件需要使用 props 选项显式声明 props，以便它可以从父组件接收到期望的数据。 - 动态Props，类似于将一个普通属性绑定到一个表达式，我们还可以使用 v-bind 将 props 属性动态地绑定到父组件中的数据。无论父组件何时更新数据，都可以将数据向下流入到子组件中
2.子向父 - 使用自定义事件 - 每个 Vue 实例都接入了一个事件接口(events interface)，也就是说，这些 Vue 实例可以做到： - 使用 on(eventName)监听一个事件−使用on(eventName)监听一个事件−使用emit(eventName) 触发一个事件
3. 非父子组件通信 - 可以使用一个空的 Vue 实例作为一个事件总线中心(central event bus)，用emit触发事件，emit触发事件，on监听事件
3.2.4 单向数据流 单向数据流极简示意图：
4.状态管理
4.1 react中的状态管理：Flux
每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态
Vuex 和单纯的全局对象有以下两点不同：
Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。
State
Vuex 使用单一状态树——是的，用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (SSOT)”而存在。这也意味着，每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。这也意味着，每个应用将仅仅包含一个 store 实例。 Getters 从state中获取状态值，有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数。
Action 类似于 mutation，不同在于：
Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。 dispatch分发action Module
由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割
Vuex示意图
HTML中： <div id="app"> <h1>Hello App!</h1> <p> <!-- 使用 router-link 组件来导航. --> <!-- 通过传入 `to` 属性指定链接. --> <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 --> <router-link to="/foo">Go to Foo</router-link> <router-link to="/bar">Go to Bar</router-link> </p> <!-- 路由出口 --> <!-- 路由匹配到的组件将渲染在这里 --> <router-view></router-view> </div>6. 渲染性能对比
操作界面时，要尽量减少对DOM的操作，Vue 和 React 都使用虚拟DOM来实现，并且两者工作一样好。 尽量减少除DOM操作以外的其他操作。（vue和react的不同） 6.1 react视图渲染 React 的渲染建立在 Virtual DOM 上——一种在内存中描述 DOM 树状态的数据结构。当状态发生变化时，React 重新渲染 Virtual DOM，比较计算之后给真实 DOM 打补丁。
Virtual DOM 提供了函数式的方法描述视图，它不使用数据观察机制，每次更新都会重新渲染整个应用，因此从定义上保证了视图与数据的同步。它也开辟了 JavaScript 同构应用的可能性。
在超大量数据的首屏渲染速度上，React 有一定优势，因为 Vue 的渲染机制启动时候要做的工作比较多，而且 React 支持服务端渲染。
元素是构成 React 应用的最小单位。元素用来描述你在屏幕上看到的内容，与浏览器的 DOM 元素不同，React 当中的元素事实上是普通的对象，React DOM 可以确保 浏览器 DOM 的数据内容与 React 元素保持一致。
6.2 vue视图渲染 Vue 通过建立一个虚拟 DOM 对真实 DOM 发生的变化保持追踪。
vue渲染的过程如下：
Vue 提供了Vue-cli 脚手架，能让你非常容易地构建项目，包含了 Webpack，Browserify，甚至 no build system。 9. HTML&&CSS 在 React 中，一切都是 JavaScript。不仅仅是 HTML 可以用 JSX 来表达，现在的潮流也越来越多地将 CSS 也纳入到 JavaScript 中来处理。这类方案有其优点，但也存在一些不是每个开发者都能接受的取舍。 - Vue 的整体思想是拥抱经典的 Web 技术，并在其上进行扩展。 9.1 react 9.1.1 JSX 在 React 中，所有的组件的渲染功能都依靠 JSX。JSX 是使用 XML 语法编写 JavaScript 的一种语法糖。 JSX, 一种 JavaScript 的语法扩展。 我们推荐在 React 中使用 JSX 来描述用户界面。JSX 乍看起来可能比较像是模版语言，但事实上它完全是在 JavaScript 内部实现的。
JSX 用来声明 React 当中的元素。
JSX本身也是一种表达式，在编译之后呢，JSX 其实会被转化为普通的 JavaScript 对象。这也就意味着，你其实可以在 if 或者 for 语句里使用 JSX，将它赋值给变量，当作参数传入，作为返回值都可以 JSX 说是手写的渲染函数有下面这些优势： 你可以使用完整的编程语言 JavaScript 功能来构建你的视图页面。比如你可以使用临时变量、JS 自带的流程控制、以及直接引用当前 JS 作用域中的值等等。开发工具对 JSX 的支持相比于现有可用的其他 Vue 模板还是比较先进的 (比如，linting、类型检查、编辑器的自动完成)。 9.1.2 组件作用域内的CSS除非你把组件分布在多个文件上 (例如 CSS Modules)，CSS 作用域在 React 中是通过 CSS-in-JS 的方案实现的 (比如 styled-components、glamorous 和 emotion)。这引入了一个新的面向组件的样式范例，它和普通的 CSS 撰写过程是有区别的。另外，虽然在构建时将 CSS 提取到一个单独的样式表是支持的，但 bundle 里通常还是需要一个运行时程序来让这些样式生效。当你能够利用 JavaScript 灵活处理样式的同时，也需要权衡 bundle 的尺寸和运行时的开销。
9.2 vue
服务端渲染路线：1. 请求一个html -> 2. 服务端请求数据( 内网请求快 ) -> 3. 服务器初始渲染（服务端性能好，较快） -> 4. 服务端返回已经有正确内容的页面 -> 5. 客户端请求js/css文件 -> 6. 等待js文件下载完成 -> 7. 等待js加载并初始化完成 -> 8. react-dom( 客户端 )把剩下一部分渲染完成( 内容小，渲染快 )
选取最优的渲染函数。 如何支持组件的异步状态。 如何将应用的初始化状态传递到客户端。 哪些生命周期函数可以用于服务端的渲染。 如何为应用提供同构路由支持。 单例、实例以及上下文的用法。 11.2 vue 1. 什么是服务器端渲染（SSR）？
2. 服务器端渲染优势 - 更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。 - 更快的内容到达时间(time-to-content)，特别是对于缓慢的网络情况或运行缓慢的设备。无需等待所有的 JavaScript 都完成下载并执行，才显示服务器渲染的标记，所以你的用户将会更快速地看到完整渲染的页面。通常可以产生更好的用户体验，并且对于那些「内容到达时间(time-to-content)与转化率直接相关」的应用程序而言，服务器端渲染(SSR)至关重要。
12. 附： react理念 1. 把UI图划分出组件层级 2. 用React创建一个静态版本 传入数据模型，渲染 UI 但没有任何交互。最好把这些过程解耦，因为创建一个静态版本更多需要的是码代码，不太需要逻辑思考，而添加交互则更多需要的是逻辑思考，不是码代码。 在创建静态版本的时候不要使用 state。 你可以自顶向下或者自底向上构建应用。也就是，你可以从层级最高的组件开始构建(即 FilterableProductTable开始)或层级最低的组件开始构建(ProductRow)。在较为简单的例子中，通常自顶向下更容易，而在较大的项目中，自底向上会更容易并且在你构建的时候有利于编写测试。 React 的单向数据流(也叫作单向绑定)保证了一切是模块化并且是快速的。 3. 定义 UI 状态的最小(但完整)表示 想想实例应用中的数据，让我们来看看每一条，找出哪一个是 state。每个数据只要考虑三个问题：
它是通过 props 从父级传来的吗？如果是，他可能不是 state。 它随着时间推移不变吗？如果是，它可能不是 state。 你能够根据组件中任何其他的 state 或 props 把它计算出来吗？如果是，它不是 state。 4. 确定你的State应该位于哪里 对你应用的每一个 state：
确定每一个需要这个 state 来渲染的组件。 找到一个公共所有者组件(一个在层级上高于所有其他需要这个 state 的组件的组件) 这个公共所有者组件或另一个层级更高的组件应该拥有这个 state。 如果你没有找到可以拥有这个 state 的组件，创建一个仅用来保存状态的组件并把它加入比这个公共所有者组件层级更高的地方。 5. 添加反向数据流 总结一下，我们发现， - Vue的优势包括： - 模板和渲染函数的弹性选择 - 简单的语法及项目创建 - 更快的渲染速度和更小的体积 - React的优势包括： - 更适用于大型应用和更好的可测试性 - 同时适用于Web端和原生App - 更大的生态圈带来的更多支持和工具 - 而实际上，React和Vue都是非常优秀的框架，它们之间的相似之处多过不同之处，并且它们大部分最棒的功能是相通的： - 利用虚拟DOM实现快速渲染 - 轻量级 - 响应式和组件化 - 服务器端渲染 - 易于集成路由工具，打包工具以及状态管理工具 - 优秀的支持和社区