两者本质的区别：模板和组件化的区别
Vue本质是MVVM框架，由MVC发展而来；
React是前端组件化框架，由后端组件化发展而来；
Vue使用模板
React使用JSX
React本身就是组件化
Vue是在MVVM上扩展的
共同点：
都支持组件化，都是数据驱动视图
监听数据变化的实现原理不同：
Vue通过getter/setter以及一些函数的劫持，能精确知道数据变化
React默认是通过比较引用的方式进行的，如果不优化(pureComponent/shouldComponentUpdate)可能导致大量不必要的VDOM得重新渲染
数据流的不同:
vue1：
父子组件之间，props可以双向绑定
组件与DOM之间可以通过v-model双向绑定
vue2去掉了第一种，父子组件之间不能双向绑定了（但是提供了一个语法糖自动帮你通过事件的方式修改），并且 Vue2.x 已经不鼓励组件对自己的 props 进行任何修改了。
React从诞生之初就不支持双向绑定，React一直提倡的是单向数据流，他称之为 onChange/setState()模式
高阶组件本质就是高阶函数，React的组件是一个纯粹的函数，所以高阶函数对React来说非常简单。
Vue中组件是一个被包装的函数，并不简单的就是我们定义组件的时候传入的对象或者函数。
组件通信的区别：
二者都有props
vue provide/inject 来实现父组件向子组件注入数据，可以跨越多个层级
react context 进行跨层级的通信
渲染模版的不同：
React是通过JSX渲染模版
而Vue是通过一种拓展的HTML语法进行渲染
React是在组件JS代码中，通过原生JS实现模板中的常见语法，比如插值，条件，循环等，都是通过JS语法实现的
Vue是在和组件JS代码分离的单独的模板中，通过指令来实现的，比如条件语句就需要 v-if 来实现
Vuex和Redux的区别:
在 Vuex 中，`$store` 被直接注入到了组件实例中,使用`dispatch`和`commit`提交更新。通过`mapState`或者直接通过`this.$store`来读取数据
组件中既可以` dispatch action `也可以 `commit updates`
在 Redux 中，我们每一个组件都需要显示的用 `connect `把需要的` props `和` dispatch` 连接起来。
Redux 中只能进行`dispatch`，并不能直接调用 `reducer` 进行修改。
Redux 使用的是不可变数据，而Vuex的数据是可变的。Redux每次都是用新的state替换旧的state，而Vuex是直接修改.
Redux 在检测数据变化的时候，是通过 diff 的方式比较差异的，而Vuex其实和Vue的原理一样，是通过 getter/setter来比较的
diff算法不同:
Vue基于snabbdom库，它有较好的速度以及模块机制。Vue Diff使用双向链表，边对比，边更新DOM。
React主要使用diff队列保存需要更新哪些DOM，得到patch树，再统一操作批量更新DOM。
事件机制不同:
Vue
Vue原生事件使用标准Web事件
Vue组件自定义事件机制，是父子组件通信基础
Vue合理利用了snabbdom库的模块插件
React
React原生事件被包装，所有事件都冒泡到顶层document监听，然后在这里合成事件下发。基于这套，可以跨端使用事件机制，而不是和Web DOM强绑定。
React组件上无事件，父子组件通信使用props
数据是否可变：
react整体是函数式的思想，把组件设计成纯组件，状态和逻辑通过参数传入，所以在react中，是单向数据流，推崇结合immutable来实现数据不可变。react在setState之后会重新走渲染的流程，如果shouldComponentUpdate返回的是true，就继续渲染，如果返回了false，就不会重新渲染
vue的思想是响应式的，也就是基于是数据可变的，通过对每一个属性建立Watcher来监听，当属性变化的时候，响应式的更新对应的虚拟dom
vue:
Object.defineProperty 数据劫持监听双向绑定
this.data = 0
react:
view = f(state)
this.setState(data:0)
react的性能优化需要手动去做，而vue的性能优化是自动的，但是vue的响应式机制也有问题，就是当state特别多的时候，Watcher也会很多，会导致卡顿，所以大型应用（状态特别多的）一般用react，更加可控
通过js来操作一切，还是用各自的处理方式:
react的思路是all in js，通过js来生成html，所以设计了jsx，还有通过js来操作css
vue是把html，css，js组合到一起，用各自的处理方式，vue有单文件组件，可以把html、css、js写到一个文件中，html提供了模板引擎来处理。
类式的组件写法，还是声明式的写法:
react是类式的写法，api很少
vue是声明式的写法，通过传入各种options，api和参数都很多。所以react结合typescript更容易一起写，vue稍微复杂。vue3支持class类式的写法了
react整体的思路就是函数式，所以推崇纯组件，数据不可变，单向数据流，当然需要双向的地方也可以做到，比如结合redux-form，而vue是基于可变数据的，支持双向绑定。react组件的扩展一般是通过高阶组件，而vue组件会使用mixin。vue内置了很多功能，而react做的很少，很多都是由社区来完成的，vue追求的是开发的简单，而react更在乎方式是否正确。
网友评论