浅谈Vue与React的区别

经过你自己的学习，相信你们你对vue与react已经有了一些了解，也觉得这两大框架有一些相同之处。那咱们就来谈一下你觉得这两大框架有什么地方是不太一样的？

我觉得最大的相同点就是虚拟DOM节点，react与vue只有框架的骨架，其他的功能就是一些组件。

1 监听数据变化的实现原理不同

vue的话使用getter|setter 方法或者函数的劫持，去来判断数据的变化与否，不需要去做一些特别的优化就可以达到一些功能。react是通过比较引用的方法进行的，加入不进行优化的话，可能会导致一些VDOM进行重新渲染。

2 数据来看也是有区别的

vue是支持双向绑定的，但是react是不支持双向数据绑定的，是单向数据流有关。

3 mixins与Hoc

vue组合一些相同的逻辑的话通过minxins进行混入，react的话是通过hoc高阶组件进行完成，参数是组件，返回的依旧是一个组件，使用回调函数居多。

4 组件通信的话

vue中三种通信方式

（1）父组件通过props向子组件进行传输数据或者回调。

（2）子组件通过 事件 向父组件进行发送消息。

（3）也可以通过组件在进行包裹进行跨级传递。

react中

（1）父组件通过 props 可以向子组件传递数据或者回调

（2）可以通过 context 进行跨层级的通信，这其实和 provide/inject 起到的作用差不多。

可以看到，React 本身并不支持自定义事件，Vue中子组件向父组件传递消息有两种方式：事件和回调函数，而且Vue更倾向于使用事件。但是在 React 中我们都是使用回调函数的，这可能是他们二者最大的区别。

5、模板渲染方式的不同

在表层上， 模板的语法不同

Vue是通过一种拓展的HTML语法进行渲染。

React 是通过JSX渲染模板（表面现象，毕竟React并不必须依赖JSX。）；

在深层上，模板的原理不同，这才是他们的本质区别：

Vue是在和组件JS代码分离的单独的模板中，通过指令来实现的，

    比如条件语句就需要 v-if 来实现。

React是在组件JS代码中，通过原生JS实现模板中的常见语法，

    比如插值，条件，循环等，都是通过JS语法实现的；

React的好处：

react中render函数是支持闭包特性的，所以我们import的组件在render中可以直接调用。但是在Vue中，由于模板中使用的数据都必须挂在 this 上进行一次中转，所以我们import 一个组件完了之后，还需要在 components 中再声明下，这样显然是很奇怪但又不得不这样的做法。

6、Vuex 和 Redux 的区别

从表面上来说，store 注入和使用方式有一些区别。

在 Vuex 中，$store 被直接注入到了组件实例中，因此可以比较灵活的使用：

使用 dispatch 和 commit 提交更新；

通过 mapState 或者直接通过 this.$store 来读取数据。

在 Redux 中，我们每一个组件都需要显示的用 connect 把需要的 props 和 dispatch 连接起来。另外 Vuex 更加灵活一些，组件中既可以 dispatch action 也可以 commit updates，而 Redux 中只能进行 dispatch，并不能直接调用 reducer 进行修改。

从实现原理上来说，最大的区别是两点：

（1）Redux 使用的是不可变数据，而Vuex的数据是可变的。Redux每次都是用新的state替换旧的state，而Vuex是直接修改

（2）Vuex其实和Vue的原理一样，是通过 getter/setter来比较的（如果看Vuex源码会知道，其实他内部直接创建一个Vue实例用来跟踪数据变化）Redux 在检测数据变化的时候，是通过 diff 的方式比较差异的，而相比之下，Vue更偏向于简单迅速的解决问题，更灵活，不那么严格遵循条条框框。因此也会给人一种大型项目用React，小型项目用 Vue 的感觉。