转自我的博客，原文地址：https://github.com/lihongxun945/myblog/issues/21
这篇文章记录我在使用 Vue 和 React 的时候，对他们的不同之处的一些思考，不仅局限于他们本身，也会包括比如 Vuex/Redux 等经常搭配使用的工具。因为涉及到的内容很多，可能下面的每一个点都能写成一篇文章，这次先简单做一个概要，等我有空做一个详细的专题出来。
监听数据变化的实现原理不同
- Vue 通过
getter/setter/能精确知道数据变化，不需要特别的优化就能达到很好的性能 - React 默认是通过比较引用的方式进行的，如果不优化（ PureComponent/shouldComponentUpdate ）可能导致大量不必要的 VDOM 的重新渲染
从这一点来说，我认为 Vue 的实现方式要比 React 来的更好更智能一些。
数据流的不同
大家都知道 Vue 中默认是支持双向绑定的。在 Vue1.0 中我们可以实现两种双向绑定：
- 父子组件之间，
props可以双向绑定 - 组件与 DOM 之间可以通过
v-model双向绑定
在 Vue2.x 中去掉了第一种，也就是父子组件之间不能双向绑定了（但是提供了一个语法糖自动帮你通过事件的方式修改），并且 Vue2.x 已经不鼓励组件对自己的 props 进行任何修改了。
所以现在我们只有 组件 <--> DOM 之间的双向绑定这一种。
然而 React 从诞生之初就不支持双向绑定，React 一直提倡的是单向数据流，他称之为 onChange/setState() 模式。
不过由于我们一般都会用 Vuex 以及 Redux 等单向数据流的状态管理框架，因此很多时候我们感受不到这一点的区别了。
HoC 和 mixins
在 Vue 中我们组合不同功能的方式是通过 mixin，而在 React 中我们通过 HoC (高阶组件）。
React 最早也是使用 mixins 的，不过后来他们觉得这种方式对组件侵入太强会导致很多问题，就弃用了 mixinx 转而使用 HoC，关于 mixin 究竟哪里不好，可以参见这篇文章 Mixins Considered Harmful。
而 Vue 一直是使用 mixin 来实现的。
为什么 Vue 不采用 HoC 的方式来实现呢？
高阶组件本质就是高阶函数，React 的组件是一个纯粹的函数，所以高阶函数对 React 来说非常简单。
但是 Vue 就不行了，Vue 中组件是一个被包装的函数，并不简单的就是我们定义组件的时候传入的对象或者函数。比如我们定义的模板怎么被编译的？比如声明的 props 怎么接收到的？这些都是 vue 创建组件实例的时候隐式干的事。由于 vue 默默帮我们做了这么多事，所以我们自己如果直接把组件的声明包装一下，返回一个高阶组件，那么这个被包装的组件就无法正常工作了。
推荐一篇很棒的文章讲的是 vue 中如何实现高阶组件 探索 Vue 高阶组件
模板渲染方式的不同
在表层上， 模板的语法不同
- React 是通过 JSX 渲染模板
- 而 Vue 是通过一种拓展的 HTML 语法进行渲染
但其实这只是表面现象，毕竟 React 并不必须依赖 JSX。 在深层上，模板的原理不同，这才是他们的本质区别：
- React 是在组件 JS 代码中，通过原生 JS 实现模板中的常见语法，比如插值，条件，循环等，都是通过 JS 语法实现的
- Vue 是在和组件 JS 代码分离的单独的模板中，通过指令来实现的，比如条件语句就需要
v-if来实现
对这一点，我个人比较喜欢 React 的做法，因为他更加纯粹更加原生，而 Vue 的做法显得有些独特，会把 HTML 弄得很乱。举个例子，说明 React 的好处：
react 中 render 函数是支持闭包特性的，所以我们 import 的组件在 render 中可以直接调用。但是在 Vue 中，由于模板中使用的数据都必须挂在 this 上进行一次中转，所以我们import 一个组件完了之后，还需要在 components 中再声明下，这样显然是很奇怪但又不得不这样的做法。
Vuex 和 Redux 的区别
store 注入和使用方式有一些区别。
在 Vuex 中，$store 被直接注入到了组件实例中，因此可以比较灵活的使用：
- 使用
dispatch和commit提交更新 - 通过
mapState或者直接通过this.$store来读取数据
在 Redux 中，我们每一个组件都需要显示的用 connect 把需要的 props 和 dispatch 连接起来。
另外 Vuex 更加灵活一些，组件中既可以 dispatch action 也可以 commit updates，而 Redux 中只能进行 dispatch，并不能直接调用 reducer 进行修改。
Select Language