前端面试题宝典

聊聊 Vue 和 React 的区别，看看你在哪个段位

简介：如果大家在简历中提到自己使用过 Vue 和 React，相信很大概率会被问到这两者的区别。今天就来看看不同段位的回答是什么样的。
可前往公众号查看原文：前端面试，关注公众号，查看最新面经和技术文章哦~

大家好，我是刘布斯。

如果大家在简历中提到自己使用过 Vue 和 React，相信很大概率会被问到这两者的区别。今天给大家分享一篇文章，看看不同段位的面试中是怎么回答的。

以下是正文：

最近部门在招聘，筛选了一批至少有 5 年经验的候选人进入了面试，其中不乏来自360和腾讯等大厂的员工。

他们的简历上，大多数都会写着熟练使用Vue2、Vue3、React，并且阅读过源码，对实现原理有自己的见解。但实际的面试情况却不尽如人意，甚至令人失望。

比如我喜欢问的一个问题：“既然你都使用过这两个框架，那么能说说它们之间的区别吗？”

这是两个不同的框架，不像是两个简单的API，每个人的理解和思考都不太一样。

我根据过往的一些面试经历，将回答的深度进行了分级，大家可以想想，自己的答案属于哪个级别呢。

青铜级

这大概是初学者的回答：Vue 和 React 都是用来构建用户界面的框架，主要的区别在于Vue用的是模板语法，而 React 用的是JSX。

只要真正了解一些，或者用过两个框架开发，还能具体说出一些语法层面的区别：

  • Vue API 多，React API 少
  • Vue 双向绑定，修改数据自动更新视图，而 React 单向数据流，需要手动 setState
  • Vue template 结构表现分离，React 用 jsx 结构表现融合，html/css都可以写到js里
  • 都可以通过 props 进行父子组件数据传递，只是 Vue props 要声明，React 不用声明可能直接使用
  • Vue 可以用插槽，React 是万物皆可 props
  • Vue2 利用基本都是 Mixin，React 可以用高阶函数、自定义 hook 实现
  • Vue 的 fragment、hook 到 Vue3 才有，Vue 还有丰富的指令，过滤器

都支持服务端渲染，都有虚拟 DOM，数据驱动，组件化开发，响应式，组件通信，生命周期，Diff，都有状态管理 Vuex/Pinia、Redux/Mobx，等等等等....

白银级

这个段位的回答者，其实对这个问题有过一定的思考：

  • Vue更关注视图层，通过模板语法让代码更简洁易读；React则使用JSX，允许在JavaScript中直接编写HTML，两者在语法上有较大的差异。
  • Vue有Vuex来进行状态管理，而React则通常使用Redux或Context API。"

而且还可能加一些偏感受方面的，比如：

React 官方只关注底层，上层应用交给社区，生态丰富，社区强大，每次更新改动小。Vue 由官方主导，生态不如 React 丰富，但上手简单。然而，Vue 每次更新变化大，学习成本高。升级从1.0到2.0，再到3.0，都需要重新学习，甚至小版本更新也需重新掌握。一些程序员到35岁选择退休，可能也是因为学习新技术的压力太大了。

此外，还可以将青铜级上面的某些点展开说一下细节，比如：

组件化

  • Vue2 的组件实质上是一个包含各种属性和方法的 Vue 核心类，通过 new Vue() 获取其实例。也就是说，Vue 组件的 script 部分导出的是一个包含各种 options 的纯对象，因此 options API 中的 this 指向 Vue 实例。这对开发者来说不够透明，需要通过文档了解 this.$xxx 的具体用途。另外，Vue 的插件都是基于 Vue 原型类开发的，通过 Vue.install 挂载到 Vue 实例上，以确保与第三方库使用的是同一个 Vue 对象。
  • 而 React 相对来说更加简洁，直接定义 render 函数生成 vnode，然后通过四个组件类来包装 vnode，不同类型的 vnode 由相应的组件类处理，职责分明。React 类组件继承自 React.Component 类，其 this 指向我们自定义的类，这对开发者来说是透明的。

hook

  • React hook 是根据调用顺序来确定下一次重新渲染时的 state 是来源于哪个，所以有一些限制，比如不能在循环/条件判断/嵌套函数里使用，而且必须在函数最顶层调用 hook 等
  • Vue3 hook 是基于响应式实现的，它是声明在 setup 里，一次组件实例化只调用一次 setup，而 React 每次重新渲染都要重新调用，性能上自然不言而喻，而且可以在循环/条件判断/嵌套函数里使用，并且正因为是基于响应式实现的，还自动实现了依赖收集，而 React 需要手动传入依赖等

等等...

黄金级

起码得深入源码吧，比如：

响应式

  • 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 等方法来进行控制，更新粒度更粗一些

Diff 算法

  • Vue2 是同层比较新老 vnode，新的不存在老的存在就删除，新的存在老的不存在就创建，子节点采用双指针头对尾两端对比的方式，全量diff，然后移动节点时通过 splice 进行数组操作
  • Vue3 是采用 Map 数据结构以及动静结合的方式，在编译阶段提前标记静态节点，Diff 过程中直接跳过有静态标记的节点，并且子节点对比会使用一个 source 数组来记录节点位置及最长递增子序列算法优化了对比流程，快速 Diff，需要处理的边际条件会更少
  • React 是递归同层比较，标识差异点保存到 Diff 队列保存，得到 patch 树，再统一操作批量更新 DOM。Diff 总共就是移动、删除、增加三个操作，如果结构发生改变就直接卸载重新创建，如果没有则将节点在新集合中的位置和老集合中的 lastIndex 进行比较是否需要移动，如果遍历过程中发现新集合没有，但老集合有就删除

钻石级

这得要脱离代码层面，上升到更加宏观的层面吧，区别摆在那里是死的，固定的，就主要看人怎么说了，比如

以突出核心思想和设计理念开头：

React 和 Vue 在核心思想和设计理念上有明显区别。

React 的目标是为 UI 开发提供一种全新的思路，本质上是通过制定规则来改变开发者的习惯。因为有 Facebook 作为后盾，React 不缺乏用户基础。

而 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的区别不仅在于表面上的模板语法与JSX，更深层次上体现在其设计理念和生态系统。

Vue的渐进式架构设计使其在不同规模的项目中都能高效应用，具有清晰的组件、指令、计算属性等机制，提供了高效的响应式数据绑定。而React则通过JSX与虚拟DOM的结合，利用函数式编程理念，提高了组件的复用性和逻辑性，并且由于其灵活的架构，React在构建复杂前端应用时表现尤为突出。

React还利用Hook等特性，在状态管理和副作用处理上提供了更强大的工具。总的来说，Vue更适合中小型项目快速上手和开发，而React则在大型复杂应用中展现了更强的适应性和灵活性。

项目选型怎么考虑？

从加载速度，运行时性能来说，我觉得这两个框架综合各种场景应该是没什么质的差别的。

硬要说的话，Vue 在更新时性能优化方面需要的心智负担可能会少那么一点，特别是 Vue3，而 React 如果不注意，容易导致一些组件无用的 Diff，但其实实际项目中真正能遇到这种性能瓶颈的也是极少数，所以(这里有两种说法)：

(如果公司主要用 Vue 技术栈的话)：所以总的来说我觉得 Vue 性能上会更有优势一点，特别是 Vue3 更加灵活，有很好的可扩展性，同时有更快的渲染速度和更小的打包体积。从 mixins 到 HOC 到 render props 再到 hooks，React 基本已经废掉了过去很多基于组件的逻辑抽象模式，抹掉了 JSX 对比模板的一个优势，Vue3 中现在也都能做到，所以我会偏向 Vue3。

(如果公司主要用 React 技术栈的话)：所以总的来说我觉得要是一些不大的系统或者 H5 就用 Vue，因为不管是上手还是开发难度上都很简单，开发效率也高嘛，而且它有更小的打包体积，毕竟在移动端网络差异大的情况下，资源体积是非常重要的。但像是一些中后台系统，或者一些大点的项目，会越做越大的，多人协作开发的，就用 React，因为它的函数式编程有更加灵活的结构和可扩展性，丰富的生态圈和工具链，解决方案多，后期也更方便迭代与维护，还适用原生 APP，所以我会偏向 React。

你觉得这两框架哪个厉害

这个，我觉得吧，我们讨论这个问题的时候，可能由于咱俩关于这一块儿的信息不对等，只是表达自己想法的话，有可能会变成两个阵营的，而且即使证明了一个比另一个牛比，也不意味着我的项目就牛比了，反正好用就都学，让自己变得厉害才更靠谱一点

最后

还没有使用过我们刷题网站（https://fe.ecool.fun/）或者刷题小程序的同学，如果近期准备或者正在找工作，千万不要错过，题库主打无广告和更新快哦~。

老规矩，也给我们团队的辅导服务打个广告。

原文链接：https://juejin.cn/post/7238199999733088313