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

  • 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