| 设计思想 |
react主张函数式编程，所以推崇纯组件，数据不可变，单向数据流 |
一款渐进式框架，采用自底向上增量开发的设计,基于可变数据，支持双向绑定 |
| 编写语法 |
推荐的做法是 JSX + inline style,没有模板，纯js渲染函数 |
vue推荐的做法是webpack+vue-loader的单文件组件格式,也支持html、css、js整合与分离写法,支持JSX语法 |
| 数据绑定 |
单向数据流，react组件中属性是不允许直接更改，需通过setState传入一个对象来进行更改，setState函数是异步的 |
双向数据绑定的mvvm框架,View的变化可以改变model，同时model变化可以出发view更新,通过直接更改vue组件属性 |
| 组件数据交换 |
【父子组件数据交互】 react中父组件使用props传递数据给子组件，子组件通过父组件在props提供的回调函数传递数据给父组件；【跨组件数据交互】通过react内置Context技术获取父子数据 |
【父子组件数据交互】:父组件经props传递数据到子组件，子组件使用$emit触发自定义事件，父组件通过v-on监听子组件的自定义事件获取来自子组件的数据, 或通过子组件$emit('xxx:update')父组件v-bind.sync="xxx"更新props数据;【跨组件数据互交】: 通过祖先组件向所有子孙后provide一个依赖 / 目标子组件注入inject指定依赖属性 |
| diff算法 |
React会逐个对节点进行更新,每当应用的状态被改变时,全部组件都会重新渲染,diff总共就是移动、删除、增加三个操作,如果遇到重复标签,根据唯一的标识（key）优先采用移动的方式，找到正确位置插入新的节点 |
vue会跟踪每一个组件的依赖关系，把新的虚拟dom树与上一次的虚拟dom树树进行一次平层的比对,不需要重新渲染整个组件树，只更新差异部分 |
| 构建工具 |
create-react-app无任何配置项 |
vue-cli完整的模板，包括单元测试在内的各种内容都涵盖 |
| 指令 |
不支持指令 |
支持指令 |
| 循环实现 |
使用map循环读取数据，返回JSX |
使用v-for指令 |
| 性能优化 |
当数据更改触发视图层更改时候，可使用shouldComponentUpdate生命周期函数控制组件是否重新渲染,避免不必要的dom操作 |
vue里面由于依赖追踪系统,每一个组件都精确地知道自己是否需要重绘,数据特别多的时候vue中的watcher也会特别多,造成页面卡顿 |
| 原生渲染native |
react native是Facebook开源的跨平台UI框架，需配置较多依赖工具，需针对iOS、Android不同编写2份代码，react native的社区非常成熟活跃 |
weex是阿里巴巴发起跨平台用户界面开发框架,一份代码支持Web、iOS、Android，社区处于成长期 |
| 服务端渲染 |
Next. js 内置页面搜索引擎优化（SEO）处理,支持CSS-in-JS库 |
Nuxt.js 强大的路由功能，支持异步数据,集成 ESLint支持各种样式预处理器 |
| 生命周期 |
(初始化阶段)getDefaultProps,getInitialState,componentWillMount,render,componentDidMount,(运行中) componentWillReceiveProps,shouldComponentUpdate,componentWillUpdate,render,componentDidUpdate，(销毁阶段)componentWillUnmount,componentDidMount |
(初始化)beforeCreate,created,beforeMount,mounted,(运行中)beforeUpdate,updated,(销毁阶段)beforeDestroy,destoryed |
| 状态工具 |
Redux：store定义状态，使用createStore新建。 使用reducer定义数据处理函数，需要返回一个新的状态给store，使用action定义一个指定触发reducer与reducer参数，使用dispatch触发，使用subscribe注册监听数据 |
vuex，引入State,Getter对状态进行定义, 使用Mutation(同步)和Action(异步)对状态进行变更,引入Module对状态进行模块化分割 |