一、监听数据变动的实现原理不同

• Vue 通过getter/setter 以及一些函数的劫持，能准确晓得数据变动，不须要特地的优化就能达到很好的性能
• React 默认是通过 比拟援用 的形式进行的，如果不优化 (pureComponent/shouldComponentUpdate) 可能导致大量不必要的 VDOM 得从新渲染

为什么 React 不准确监听数据变动呢 ？这是因为 Vue 和 React 设计理念上的区别，Vue 应用的是可变数据，而 React 更强调数据的不可变。 所以应该说没有好坏之分，Vue 更加简略，而 React 构建大型利用的时候更加鲁棒。

二、数据流的不同

• 大家都晓得 Vue 中默认是反对双向绑定的。在 Vue1.0 中咱们能够实现两种双向绑定：

  • 父子组件之间，props能够双向绑定
  • 组件与 DOM 之间能够通过 v-model 双向绑定
• 在 Vue2.x 中去掉了第一种，也就是父子组件之间不能双向绑定了（然而提供了一个语法糖主动帮你通过事件的形式批改），并且 Vue2.x 曾经不激励组件对本人的 props 进行任何批改了。
• 然而 React 从诞生之初就不反对双向绑定，React 始终提倡的是单向数据流，他称之为 onChange/setState() 模式。不过因为咱们个别都会用 Vuex 以及 Redux 等单向数据流的状态治理框架，因而很多时候咱们感触不到这一点的区别了。

三、HOC 和 mixins

在 Vue 中咱们组合不同性能的形式是通过 mixin，而在 React 中咱们通过 HOC（高阶组件）。React 最早也是应用 mixins 的，不过起初他们感觉这种形式对组件侵入太强会导致很多问题，就弃用了 mixinx 转而应用 HoC，对于 mixin 到底哪里不好，能够参考 React 官网的这篇文章 Mixins Considered Harmful。而 Vue 始终是应用 mixin 来实现的。

然而为什么 Vue 不采纳 HOC 的形式来实现呢？

因为 高阶组件实质就是高阶函数，React 的组件是一个纯正的函数，所以高阶函数对 React 来说非常简单。然而 Vue 就不行了，Vue 中组件是一个被包装的函数，并不简略的就是咱们定义组件的时候传入的对象或者函数。比方咱们定义的模板怎么被编译的？比方申明的 props 怎么接管到的？这些都是 vue 创立组件实例的时候隐式干的事。因为 vue 默默帮咱们做了这么多事，所以咱们本人如果间接把组件的申明包装一下，返回一个高阶组件，那么这个被包装的组件就无奈失常工作了。

四、组件通信的区别

在 Vue 中有三种形式能够实现组件通信：

• 父组件通过 props 向子组件传递数据或者回调，尽管能够传递回调，然而咱们个别只传数据，而通过 事件的机制来解决子组件向父组件的通信
• 子组件通过 事件 向父组件发送音讯
• 通过 V2.2.0 中新增的 provide/inject 来实现父组件向子组件注入数据，能够逾越多个层级。

在 React 中，也有对应的三种形式：

• 父组件通过 props 能够向子组件传递数据或者回调
• 能够通过 context 进行跨层级的通信，这其实和 provide/inject 起到的作用差不多。

能够看到，React 自身并不反对自定义事件 ，Vue 中子组件向父组件传递音讯有两种形式： 事件和回调函数，而且 Vue 更偏向于应用事件 。然而 在 React 中咱们都是应用回调函数的，这可能是他们二者最大的区别。

五、渲染模版的不同

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

• React 是通过 JSX 渲染模版
• 而 Vue 是通过一种拓展的 HTML 语法进行渲染

但其实这只是表面现象，毕竟React 并不必须依赖 JSX。在深层上，模板的原理不同，这才是他们的本质区别：

• React 是在组件 JS 代码中，通过 原生 JS 实现 模板中的常见语法，比方插值，条件，循环等，都是通过 JS 语法实现的
• Vue 是在和组件 JS 代码拆散的独自的模板中，通过指令来实现的 ，比方 条件语句就须要 v-if 来实现

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 进行批改。

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

• Redux 应用的是不可变数据，而 Vuex 的数据是可变的。Redux 每次都是用新的 state 替换旧的 state，而 Vuex 是间接批改
• Redux 在检测数据变动的时候，是通过 diff 的形式比拟差别的，而 Vuex 其实和 Vue 的原理一样，是通过 getter/setter 来比拟的（如果看 Vuex 源码会晓得，其实他外部间接创立一个 Vue 实例用来跟踪数据变动）

七、diff 算法不同

两者流程思维上是相似的，都是基于两个假如（使得算法复杂度降为 O(n)）：

• 不同的组件产生不同的 DOM 构造。当 type 不雷同时，对应 DOM 操作就是间接销毁老的 DOM，创立新的 DOM。
• 同一档次的一组子节点，能够通过惟一的 key 辨别。

但两者源码实现上有区别：

• Vue 基于 snabbdom 库，它有较好的速度以及模块机制。Vue Diff 应用双向链表，边比照，边更新 DOM。
• React 次要应用diff 队列保留须要更新哪些 DOM，失去 patch 树，再对立操作批量更新 DOM。

八、事件机制不同

Vue

• Vue 原生事件应用 规范 Web 事件
• Vue 组件 自定义事件机制，是父子组件通信根底
• Vue 正当利用了 snabbdom 库的模块插件

React

• React 原生事件被包装，所有事件都冒泡到顶层 document 监听，而后在这里合成事件下发。基于这套，能够跨端应用事件机制，而不是和 Web DOM 强绑定。
• React 组件上无事件，父子组件通信应用 props