vue和react的相同点和区别

相同点

• 都是虚拟dom+diff算法
• 将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。
• 不允许子组件改变父组件传来的props值
• diff算法都不做跨级比较，只做同级比较

区别

• 模板渲染的方式不同，react是jsx，react是拓展的html语法
• 框架本质不相同，vue是mvvm，react是前端组件化框架
• 数据流的不同，vue是通过v-model进行双向数据流，react是单向数据流，一般通过setState/onChange
• diff算法有区别（react只对比节点的key和tag，vue对比key、tag还有其他属性）
  
• 从响应式上来看
  • Vue2 响应式的特点就是依赖收集，数据可变，自动派发更新，初始化时通过 Object.defineProperty 递归劫持 data 所有属性添加 getter/setter，触发 getter 的时候进行依赖收集，修改时触发 setter 自动派发更新找到引用组件重新渲染
  • Vue3 响应式使用原生 Proxy 重构了响应式，一是 proxy 不存在 Vue2 响应式存在的缺陷，二是性能更好，不仅支持更多的数据结构，而且不再一开始递归劫持对象属性，而是代理第一层对象本身。运行时才递归，用到才代理，用 effect 副作用来代替 Vue2 里的 watcher，用一个依赖管理中心 trackMap 来统一管理依赖代替 Vue2 中的 Dep，这样也不需要维护特别多的依赖关系，性能上取得很大进步
  • 相比 Vue 的自动化，React 则是基于状态，单向数据流，数据不可变，需要手动 setState 来更新，而且当数据改变时会以组件根为目录，默认全部重新渲染整个组件树，只能额外用 pureComponent/shouldComponentUpdate/useMemo/useCallback 等方法来进行控制，更新粒度更粗一些
• 设计理念和数据管理不同
  • React 一开始定位的就是 UI 开发的新思路，这种思想说白了就是要改变开发者，我制定规则，你们都照我的来，因为背靠大公司(facebook)，所以不缺用户，而 Vue 是尽可能降低前端开发的门槛来适应不同的开发者，让开发者怎么爽怎么来，正是因为这种设计理念上的差别对后续设计也产生了一些不可逆的影响，或者说这两框架后续架构的变化都是围绕这个来的。
  • 虽然都是数据驱动，但 Vue 是响应式的，React 是手动 setState，可以说正是因为这个对后面架构的设计都产生了一些不可逆的影响，或者说这两框架后续架构的变化都是围绕这个来的。

  比如 Vue 是对数据进行劫持/代理，它对监测数据的变化更加精准，动了多少数据就触发多少更新，更新粒度很小，而 React 推崇函数式，这是没办法感知数据变化的，就是说不知道什么时候应该刷新，而且即便是手动 setState 触发更新，它也也不知道哪些组件需要刷新，而是渲染整个 DOM，说白了就是无脑刷新嘛，这样就导致性能不好，所以后面只能不断通过其他办法来避免不必要的刷新，或者优化无脑刷新的性能。当然 Vue 也不是那么完美，它实现精准刷新也是有代价的，就是需要给每个组件配置监视器，管理依赖收集和派发更新，这同样是有消耗的。且不是说性能谁好吧，我们可以对比下这两框架版本迭代可以发现，React 迭代是增加了一个个避免刷新的钩子函数或者 API 还有采用 Fiber 的架构来做时间分片也是来优化渲染的性能。而 Vue1/Vue2/Vue3 每个版本虽然改的东西多，但核心都是围绕响应式来优化的，所以我觉得这是这两框架之间最重要的区别
  比如正是这种设计上的区别，也直接影响了 hooks 的实现和表现，React hook 底层是基于链表实现的，每次组件被 render 的时候都会按顺序执行所有 hooks，而且正因为底层是链表，每个 hook 的 next 是指向下一个 hook 的，所以我们写代码是不能在不同的 hooks 调用里使用条件判断/函数嵌套之类的，因为这会导致执行顺序不对，从而出错。而 Vue hook 只会被注册调用一次，因为它是声明在 setup 里，一次组件实例化只调用一次 setup，Vue 之所以能避开这些问题，主要还是得益于数据响应式，不需要链表对 hooks 进行记录，而是直接对数据代理观察，但它也有困扰的地方，就是不得不返回一个包装对象，通过 .value 获取。因为在 JS 里基础类型只有值，没有引用，或者说只存在栈里，使用完就回收了，无法追踪后续变化，自然做不到数据的代理和拦截，这算是这个设计的一个缺点吧
  再比如编译优化的问题，Vue 能够做到数据劫持，再到 Vue3 动静结合的 Diff 思想也得益于它的模板语法实现了静态编译。就是能做到预编译优化，可以静态分析，在解析模板时能根据解析到的不同的标签、文本等分别执行对应的回调函数来构造 AST，而 React 虽然 JSX 语法更加灵活，可也正是因为这样导致可以优化的地方不足，重新渲染时就是一堆递归调用 React.createElement，无法从模板层面进行静态分析，也就做不到双向绑定，即使是很厉害的 fiber，也是因为伤害已经造成，所以通过时间分片的优化来弥补伤害吧，因为已经无法在编译阶段进行优化了，这也是这个设计所带来的问题吧

vue？react？怎么选择？

1. 在选型前，首先是要考虑历史因素和团队现状，切换技术栈的前提是不要显著的增加上下游合作方的时间成本。
2. 充分考虑框架的兼容性，如果不满足业务需求，再优秀也要 pass。
3. 对于新手来说，React 过于灵活，虽然常用 API 不多，但是里面有很多设计模式和概念，在具备一定规模的项目中，新手的学习曲线一开始会比较陡，并且需要代码手动优化，同时庞大的社区中有层出不穷的优秀框架，但是在同类型库的选择上也会相对吃力，所以不推荐新手使用。但是对于具备几年经验的开发者来说，React 的灵活也恰恰是优势，再结合各种设计模式，很容易使项目更具创造性，对于维护具备一定规模的项目很有益处，这也真正能体现开发者的编程能力。
4. 而 Vue 则恰恰相反，对新手友好，SFC 中 HTML、script、style 相互隔离的方式更符合传统的前端开发逻辑，Vue 也已提供了基本的优化，且周边框架的选型也不需要过多关注。
5. 关于是否适合大型项目，有人说 Vue 不适合大型项目，适合大型项目的一定是 React，笔者并不这么认为，如果 Vue3 还没出，那么受制于 Vue2 的 Option Api，Vue 在大型项目中多少会有影响，主要体现在逻辑复用和代码组织上，但是 Vue3 有 setup 模式下 Composition Api 的加持，Vue 也已足够灵活，笔者认为关于 “Vue 不适合大型项目” 的论调可以休矣。
6. 如果从性能上考虑，在本文的数据对比中 Vue3 要优于 React，但是之前已经说过，数据并非决定因素，尤其在带宽足够和设备性能越来越强悍的今天，很多运行时的性能问题其实在设备层面被抹平，普通业务中甚至已经不需要过多关注运行时性能了
7. 最后，不论 React 还是 Vue，都是相当优秀的框架，在实现层面同样都有虚拟 DOM、声明式 UI 等特性，同时各自也都拥有着活跃的社区和周边，并且有来自各个公司中无数业务线的成熟产品背书，在跨端上也有着非常不错的支持。