vue和react区别

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第11天，点击查看活动详情。

面试中常问到vue和react的区别、技术选型相关的问题。本文就此问题进行讨论。

为什么要讨论react和vue的不同呢？因为React和Vue相当的像，这两个框架都是现代，

vue和react的相同点

都是创建UI界面的JavaScript库；
都用了虚拟DOM，提高渲染速度；
提供响应式和可组合性的视图组件（组件化）
独立的路由系统和全局状态的管理的处理来自于第三方库

不同点

1、概念/框架层面

Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易上手学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。Vue本质是MVVM框架，由MVC发展而来。

React是一个用于构建用户界面的开源JavaScript库，主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。其实React就是一个前端组件化框架，由后端组件化发展而来。

2、数据流

数据流向及数据变化

vue的思想是响应式的，实现了数据的双向绑定。也就是基于是数据可变的，通过对每一个属性建立Watcher来监听，当属性变化的时候，响应式的更新对应的虚拟dom。
react整体是函数式的思想，是单向数据流，推崇结合immutable来实现数据不可变。react在setState之后会重新走渲染的流程。

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

Vue通过 getter/setter以及一些函数的劫持，能精确知道数据变化。
React默认是通过比较引用的方式（diff）进行的，如果不优化可能导致大量不必要的VDOM的重新渲染。
为什么React不精确监听数据变化呢？这是因为Vue和React设计理念上的区别，Vue使用的是可变数据，而React更强调数据的不可变，两者没有好坏之分，Vue更加简单，而React构建大型应用的时候更棒。

实现上，Vue跟React的最大区别在于数据的reactivity，就是反应式系统上。 Vue提供反应式的数据，当数据改动时，界面就会自动更新，而React里面需要调用方法onchange()/setState。

vue中改动数据之后，数据本身会把这个改动push推送出去，告知渲染系统自动进行渲染。
在React里面，它是一个Pull的形式，用户要给系统一个明确的信号说明现在需要重新渲染了，这个系统才会重新渲染。

两者并没有绝对的优劣之分，更多的也是思维模式和开发习惯的不同。

3、模板语法

vue 采用了template， react采用了jsx （本质上都是模版）。

vueVue是通过一种拓展的HTML语法进行渲染。比如Vue的单文件组件是以template+JavaScript+CSS的组合模式呈现，它跟web现有的HTML、JavaScript、CSS能够更好地配合。Vue模板语法是在和组件JS代码分离的单独的模板中，通过指令来实现的，比如条件语句就需要 v-if 来实现对这一点，这样的做法显得有些独特，会把HTML弄得很乱。
React是通过JSX渲染模板。模板的原理不同,通过原生JS实现模板中的常见语法，比如插值，条件，循环等，都是通过JS语法实现的，更加纯粹更加原生。

从使用习惯和思维模式上来说：

Vue更加注重web开发者的习惯，更加友好上手。但是vue的需要理解和记忆的api很多。
React对于拥有函数式编程背景的开发者以及一些并不是以web为主要开发平台的开发人员而言，React更容易接受。其api较少，更加纯粹更加原生。

对于一个没有任何Vue和React基础的web开发者来说， Vue会更友好，更符合他的思维模式。这并不意味着他们不能接受Vue，Vue和React之间的差异对他们来说就没有web开发者那么明显。可以说，Vue更加注重web开发者的习惯

4、渲染

Vue可以更快地计算出Virtual DOM的差异，这是由于它在渲染过程中，会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树。 React在应用的状态被改变时，全部子组件都会重新渲染。通过shouldComponentUpdate这个生命周期方法可以进行控制，但Vue将此视为默认的优化。

5、diff算法

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

不同的组件产生不同的 DOM 结构。当type不相同时，对应DOM操作就是直接销毁老的DOM，创建新的DOM。

同一层次的一组子节点，可以通过唯一的 key 区分。

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

Vue基于snabbdom库，它有较好的速度以及模块机制。Vue Diff使用双向链表，边对比，边更新DOM 。

React主要使用 diff队列保存需要更新哪些DOM，得到patch树，再统一操作批量更新DOM。

6、事件机制

Vue原生事件使用标准Web事件。Vue组件自定义事件机制，是父子组件通信基础。vue合理利用了snabbdom库的模块插件
React的原生事件被包装，所有事件都冒泡到顶层document监听，然后在这里合成事件下发。React是基于这套可以跨端使用事件机制，而不是和Web DOM强绑定。React组件上无事件，父子组件通信使用props。

7、性能

react的性能优化需要手动去做，而vue的性能优化是自动的，但是vue的响应式机制也有问题，就是当state特别多的时候，Watcher也会很多，会导致卡顿，所以大型应用（状态特别多的）一般用react，更加可控。

Vue和React在性能上是相似的。但是两者在优化性能时有一些差异：

在react中，当组件状态改变时，它会触发整个子组件数重新渲染，以根组件作为渲染基点。为了避免不必要的子组件重新渲染，你需要使用PureComponent或者实现 shouldComponentUpdate。
在Vue中，一个组件在渲染期间依赖于自动追踪，因此系统知道提前预判哪一个组件需要渲染当组件状态发生改变时。每个组件可以被认为具有自动为你实现shouldComponentUpdate，不需要注意嵌套的组件。

总的来说，这不需要开发人员对整个性能进行优化，允许他们更专注于构建应用程序本身。

总结

基于以上的梳理，总结出以下不同：

框架的本质是不同的：vue的MVVM的数据双绑的模式，react是构建用户界面的js库。
数据流及响应式的不同：vue是数据双绑，react数据流向是单向的。监听数据变化的实现原理不同。
模板语法不同：vue是指令+模板语法，react是jsx函数式编程。
渲染区别：vue是数据变化通知依赖项精确的驱动渲染，react是需要调用setState时重新渲染全部子组件，但是可以通过shouldComponentUpdate等一些方法进行优化控制
diff：Vue Diff使用双向链表边对比边更新，react的diff将需要更新的部分添加到任务队列进行批量更新
事件机制：vue直接是原生事件，react是合成事件：事件冒泡到根节点进行事件委托处理，且做了跨端兼容处理。