| 类目 | React | Vue |
|---|---|---|
| 设计理念 | how correc it can be | how easy it can be |
| 数据变化 | 数据不可变(指state中某个属性不会单独变动)，要变动就会把整个变动后的新state作为一个全新的对象传入，react 默认是通过比较引用的方式进行的，如果不优化可能导致大量不必要的VDOM的重新渲染，但是相对来说，面对state巨量的大型项目，反而react更加的易于管理 | 数据可变，vue 是响应式，通过对每一个对象建立Watcher来监听，当对象变化的时候，响应式的更新对应的虚拟dom，但是对于对象属性，直接通过序列号或者遍历进行操作并不能监控到，需要使用push等规定内的方法或者使用vue给出的setDate方法方能监控到数据变化，vue 通过 getter/setter 以及一些函数的劫持，能精确知道数据变化，不需要特别的优化就能达到很好的性能，通常适合搭建小型项目 |
| 页面操作 | 通过js操作，生成一切，用jsx生成html，用jss生成css，整个页面看起来就像全是由js来生成所有需要的东西 | 通过各自的方式操作自身，html用template来处理，css还是css，js还是js，除了包裹标签的形式稍有区别，操作方式与原生html页面几乎一致，整个页面看起来各司其职，分工明确 |
| 写法 | 类式写法，绑定es6的class，感觉与nodejs更加亲密 | 声明式写法，但vue3.0也支持类式写法，感觉与原生的html结构更为接近 |
| 拓展 | 通过高阶组件，类似于js高阶函数 | 通过mixin，感觉更加类似于通过对象属性的方式传入 |
| 数据流 | react因其状态不可变，纯组件的理念，提倡单向数据流 | vue要做响应式，提供双向数据绑定，但是平时大家都会用vuex或redux等单向数据流的状态管理工具，这一点其实差异体验变得很小 |
| 模板渲染方式 | react是在组件js代码中，通过原生js实现模板中的常见语法，比如插值，条件，循环等，都是通过js语法实现的，react中render函数是支持闭包特性的，import的组件在render中可以直接调用。 | Vue是在和组件JS代码分离的单独的模板中，通过指令来实现的，比如条件语句就需要 v-if 来实现，vue引入的组件，需要再放入components声明，在render中用this获得。 |
| 数据流的状态管理工具 | 在 redux 中，我们每一个组件都需要显式的用 connect 把需要的 props 和 dispatch 连接起来。另外每一层的分层也相对严格。 | 直接来讲vuex更加的灵活，简单，$store 被直接注入到了组件实例中。 |
| Virtual DOM | 而对于React而言，每当应用的状态被改变时，全部子组件都会重新渲染。当然，这可以通过shouldComponentUpdate这个生命周期方法来进行控制，但Vue将此视为默认的优化。 |
Vue宣称可以更快地计算出Virtual DOM的差异，这是由于它在渲染过程中，会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树。 |
| react 官方只提供了核心库（core + dom）和路由，其他都需要开发者自行选择工具库（immutable.js，redux，mobx 等等），给开发者留下了更多的可能（社区都有成熟方案了）。react 可以说是 开放式 的框架。 | vue 是一个 “渐进式” 的 JavaScript mvvm 框架， vue 官方提供了一系列的工具，如路由 vue-router，状态树管理器 vuex，网络请求 axios（非 vue 官方）等。如果您不打算做 SPA，那么您是不需要 vue-router 的；假如您的页面不存在非常复杂的交互或数据递进式体验时，您可能不需要 vuex... 总之，官方都为开发者考虑好了，少了技术选型的痛苦。 |