Vue和React作为当前前端开发最热门的框架，那么他们的区别到底在哪里，我们必须要搞清楚。

一、官网比对

Vue

React

通过各自官网首页的关键词介绍我们可以发现一些端倪，vue渐进式，易学易用，框架，react把自己描述为库，那么框架和库的区别是什么呢？

区别一、从开发者使用上来说

库：一般来说是一组功能的集合，开发者自己编写代码，并将库作为工具调用。 框架：是一套完整的解决方案, 框架中制定了一套规则,使用框架的时候,只需要按照规则去编写代码。

如果vue和react都用过的同学，vue其实就是提供了一套完整的解决方案，从搭建项目的脚手架到路由到状态管理工具等都由vue提供，反观react，其实只是提供了一套渲染方案，将我们的代码渲染到web界面仅此而已，其他的都是由社区提供，所以从使用体验上来说，我们必须要遵从vue的写法规范，而react则更自由，自由的代价就是我们要对react的生态有足够的了解才能去架构好一个react的项目，这就增加了上手难度和学习成本，当然react社区也提供了一些非常优秀的企业级前端开发框架（如umi）等。

区别二、设计理念

运行时&编译时

vue：介于运行与编译之间，它保留了虚拟 dom，但是会通过响应式去控制虚拟 dom 的颗粒度，在编译阶段，做了足够多的性能优化，做到了靶向更新。

react重运行时：编译时只做了把jsx转换成createElement，其余都是运行时来做的，比如fiber，调度优先级，render等。

react在运行时主要解决cpu和io的问题

cpu： 利用MessageChannel实现时间切片，将长任务分拆到每一帧中，每一帧执行一小段任务的操作，并且让组件的渲染 “可中断” 并且具有 “优先级”

io：利用并发模式来解决

jsx&template:

jsx：由于jsx过度灵活，不适宜在编译阶段做优化，所以在vue3中使用jsx会损失模版编译阶段的部分性能；

template：较为规范可做编译优化,做静态和动态区分；

更新粒度上

1.react树级更新 树级更新的框架会从root再生成一颗完整的虚拟dom树，生成过程中与之前的虚拟dom树对应节点进行比较 并找到变化的节点执行对应的dom操作。

2.vue组件级更新 会找到触发更新节点所在的组件，生成该组件的虚拟dom树，而不是全树，生成过程中与该组件之前的虚拟dom对应节点进行比较，依赖虚拟dom，关心触发更新的节点，找到该节点对应的组件。

更新策略

vue:双向数据绑定，数据可变。数据改变->依赖对数据进行拦截 视图改变，如操作dom，oninput,onchange事件等，vue的data和模版是一条线，无论谁被修改，另一方都会发生变化。通过数据劫持来监听数据变化从而重新渲染组件

react:数据不可变，每次返回的都是新的state，通过触发setState触发然后从根节点diff，以得到最新的视图。

diff算法

vue：vue2采用双端对比，参考了snabbdom，v3加入了最长递增子序列算法。 react：由于是链表结构无法使用双端对比。