大厂技术 高级前端 Node进阶
点击上方 程序员成长指北,关注公众号
回复1,加入高级Node交流群
如果大家在简历中提到自己使用过 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则在大型复杂应用中展现了更强的适应性和灵活性。
![5aac2fae150156d7e78c4ec414efb2f2.jpeg](https://img-blog.csdnimg.cn/img_convert/5aac2fae150156d7e78c4ec414efb2f2.jpeg)
项目选型怎么考虑?
从加载速度,运行时性能来说,我觉得这两个框架综合各种场景应该是没什么质的差别的。
硬要说的话,Vue 在更新时性能优化方面需要的心智负担可能会少那么一点,特别是 Vue3,而 React 如果不注意,容易导致一些组件无用的 Diff,但其实实际项目中真正能遇到这种性能瓶颈的也是极少数,所以(这里有两种说法):
(如果公司主要用 Vue 技术栈的话):所以总的来说我觉得 Vue 性能上会更有优势一点,特别是 Vue3 更加灵活,有很好的可扩展性,同时有更快的渲染速度和更小的打包体积。从 mixins 到 HOC 到 render props 再到 hooks,React 基本已经废掉了过去很多基于组件的逻辑抽象模式,抹掉了 JSX 对比模板的一个优势,Vue3 中现在也都能做到,所以我会偏向 Vue3。
(如果公司主要用 React 技术栈的话):所以总的来说我觉得要是一些不大的系统或者 H5 就用 Vue,因为不管是上手还是开发难度上都很简单,开发效率也高嘛,而且它有更小的打包体积,毕竟在移动端网络差异大的情况下,资源体积是非常重要的。但像是一些中后台系统,或者一些大点的项目,会越做越大的,多人协作开发的,就用 React,因为它的函数式编程有更加灵活的结构和可扩展性,丰富的生态圈和工具链,解决方案多,后期也更方便迭代与维护,还适用原生 APP,所以我会偏向 React。
你觉得这两框架哪个厉害
这个,我觉得吧,我们讨论这个问题的时候,可能由于咱俩关于这一块儿的信息不对等,只是表达自己想法的话,有可能会变成两个阵营的,而且即使证明了一个比另一个牛比,也不意味着我的项目就牛比了,反正好用就都学,让自己变得厉害才更靠谱一点
最后
Node 社群
我组建了一个氛围特别好的 Node.js 社群,里面有很多 Node.js小伙伴,如果你对Node.js学习感兴趣的话(后续有计划也可以),我们可以一起进行Node.js相关的交流、学习、共建。下方加 考拉 好友回复「Node」即可。
“分享、点赞、在看” 支持一波👍