讲讲vue和react的区别

相同点：都使用虚拟DOM高效的更新视图，都提倡组件化，都实现了数据驱动视图，vue3和react16.8后也都采用函数式编程的思想解析逻辑复用的问题，vue3引入组合式API，react引入了hooks。

不同点：

vue和react 最明显的不同就是对于UI描述方式不同，react 使用JSX语法， vue 使用 单文件组件template 描述。

然后就是 vue遵循 可变数据 思想，采用响应式数据，依赖追踪等手段实现数据驱动视图变化

react 遵循不可变数据思想，每一时刻的状态相当于当前的一个快照，状态改变时，会从上到下进行diff寻找状态改变的位置然后更新视图。

其它的很多不同点也都和这两点分不开。

开发上

因为vue的数据是可变数据响应式的，所有它可以直接通过直接修改状态触发视图变化，也就是直接使用=赋值，响应式加依赖追踪可以让框架直接知道哪些数据发生了变化，所以vue可以提供computed,watch,watchEffect等api，同时框架明确知道了哪里的数据发生变化，那么vue 就可以很方便的做到组件级的状态更新，状态变化只会影响使用了该状态的组件更新，甚至不会触发其子组件的更新。

而相对的react是不可变数据，没有响应式，所有它无法直接使用=修改状态，所以它提供了setState，通过调用setState 添加状态更新，然后触发整个应用的diff，在找到更新的组件，同时它无法在框架内部做到父组件重新渲染时，子组件不重新渲染。需要开发者手动调用useMemo，useCallBack，或者PureComponent 等手段自行判断。

性能优化，导致的底层实现不同

由此可以看出react 由于每次更新都是整个应用的diff，同时无法做到仅指定组件重新渲染，就会导致过多的额外计算，那么在项目应用较大的时候，就有可能出现一次更新耗时过长，也就是产生了js执行时间超过一帧的长任务，同时 js 线程又和浏览器渲染线程是互斥的，用户的视角就是页面反应慢卡顿。

为了解决这个问题，react自16.8后引入了fiber架构，同时增加了调度器scheduler和优先级lane等概念，通过fiber架构实现一次协调Reconciler的过程，可以打断分成多次执行。通过调度器scheduler 利用 MessageChannel 创建宏任务和相应的调度手段，做到每执行5ms就让出游览器执行权，然后在下一个宏任务里继续执行，实现了协调的过程中也可以让游览器响应用户操作，同时添加优先级的概念为不同的更新实践设置不同的优先级，做到了高优先级的任务可以先行。通过这一系列的手段，做到了并发渲染，一定程度上解决了卡顿的问题。

相对的vue 走的不是这套流程，vue 基于响应式系统，每次更新并不需要diff整个应用，仅仅diff 使用了数据的组件就可以了，所以相对应的产生长任务的情况就不多，所以vue并没有引入fiber的架构，相对应的它采用了另一套优化的思路，对比react 死磕运行时，优化都在运行时里处理，vue 借助template 相对jsx 更固定，借助编译时优化，在编译时分析template模板字符串，采用 block 和 patchFlags 等手段找到组件内的所有动态节点，挂载到生成的vnode 上，后续更新的时候可以只比对这些动态节点，做到了靶向更新，让组件的性能不再与组件内的dom节点数成正比，而是与组件内的动态节点数成正比。同时使用静态提升、预字符串化、缓存事件handler等手段进一步优化性能，减少重新渲染的消耗。

总的来说，就是react 死磕运行时，在运行时想办法实现性能优化，vue借助编译手段实现性能优化。