1、监听数据变化的实现原理不同
Vue通过getter和setter来精确的改变数据
React默认则是通过diff算法，将新的数据和老的数据作对比，然后重新渲染。
两者最本质的区别就是vue的数据是可改变的，而React强调数据不可变。在使用上Vue更加的简单方便，而React则显得更加稳重一些
2.数据流的不同
vue最开始是支持组件间的数据双向的，也就是子组件可以修改父组件的数据。并且也有v-model双向绑定的指令。
但是后来vue也废弃了前者，将组件间的数据双向流改成了单向流。
React不支持数据双向，无论是组件间还是dom元素的双向都是不支持的。React一直采用的都是onChange/setState模式。就是监听数据变化，然后调用setState方法生成新的数据。Vuex和Redux都是单向数据流
3.组件之间的通信
Vue中有三种方式可以实现组件通信：父组件通过props向子组件传递数据或者回调，虽然可以传递回调，但是我们一般只传数据；子组件通过事件向父组件发送消息；通过V2.2.0中新增的provide/inject来实现父组件向子组件注入数据，可以跨越多个层级。
React中也有对应的三种方式：父组件通过props可以向子组件传递数据或者回调；可以通过 context 进行跨层级的通信，这其实和 provide/inject 起到的作用差不多。React 本身并不支持自定义事件，而Vue中子组这件向父组件传递消息有两种方式：事件和回调函数，但Vue更倾向于使用事件。在React中我们都是使用回调函数的，可能是他们二者最大的区别。
4.模板渲染方式的不同
在表层上，模板的语法不同，React是通过JSX渲染模板。而Vue是通过一种拓展的HTML语法进行渲染，但其实这只是表面现象，毕竟React并不必须依赖JSX。
在深层上，模板的原理不同，这才是他们的本质区别：React是在组件JS代码中，通过原生JS实现模板中的常见语法，比如插值，条件，循环等，都是通过JS语法实现的，更加纯粹更加原生。而Vue是在和组件JS代码分离的单独的模板中，通过指令来实现的，比如条件语句就需要 v-if 来实现对这一点，这样的做法显得有些独特，会把HTML弄得很乱。
举个例子，说明React的好处：react中render函数是支持闭包特性的，所以我们import的组件在render中可以直接调用。但是在Vue中，由于模板中使用的数据都必须挂在 this 上进行一次中转，所以我们import 一个组件完了之后，还需要在 components 中再声明下，这样显然是很奇怪但又不得不这样的做法。
5.渲染过程不同
Vue可以更快地计算出Virtual DOM的差异，这是由于它在渲染过程中，会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树。
React在应用的状态被改变时，全部子组件都会重新渲染。通过shouldComponentUpdate这个生命周期方法可以进行控制，但Vue将此视为默认的优化
6.框架本质不同
Vue本质是MVVM框架，由MVC发展而来；
React是前端组件化框架，由后端组件化发展而来。
7.Vuex和Redux的区别
这两者的区别就是store的注入和使用上的不同，vue中是将store挂在到跟实例上，每个组件可以通过store.dispatch就可以去分发通知。vuex中的action是一个函数，他可以直接commit mutations 来修改state中的数据。而Redux是不支持这样做的，因为在处理数据上的不同，Redux是不支持直接修改state的。必须通过store.dispatch分发一个action，然后，reduce中根据action来生成一个新的state。他不支持直接修改state。
在store的注入上，Redux中，我们每一个组件都需要显示的用connect把需要的props和dispatch连接起来。组件是访问不到store的。每个组件都必须以这种方式连接
从实现原理上来说，最大的区别是两点：Redux使用的是不可变数据，而Vuex的数据是可变的，因此，Redux每次都是用新state替换旧state，而Vuex是直接修改。Redux在检测数据变化的时候，是通过diff的方式比较差异的，而Vuex其实和Vue的原理一样，是通过getter/setter来比较的，这两点的区别，也是因为React和Vue的设计理念不同。React更偏向于构建稳定大型的应用，非常的科班化。相比之下，Vue更偏向于简单迅速的解决问题，更灵活，不那么严格遵循条条框框。因此也会给人一种大型项目用React，小型项目用Vue的感觉
网友评论