关于前端:5年以上前端Vue-和-React-的区别看这里

大家好，我是沐华。最近部门招人，捞了一批简历至多都是 5 年以上的前端来面试，其中不乏 360 的，腾讯的，简历上写的根本都是纯熟应用 Vue2、Vue3、React 并浏览源码对其实现原理有本人的了解，理论问起来却未免让人唏嘘

比方：既然两个框架都用过，那能说一下你感觉这俩有什么区别吗？

毕竟是两个框架，不像两个 API，要说细节上的区别就太多太多了，可能能聊几个小时都聊不完，所以你给本人的定位是什么呢？

说说 Vue 和 React 的区别

青铜级

只有真正理解一些，或者用过两个框架开发，就肯定能说上来的一些语法层面：

• 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 的 frgments、hook 到 Vue3 才有，Vue 还有丰盛的指令，过滤器

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

白银级

1. 能够加一些偏感触方面的，比方：

React 官网只关注底层，下层利用解决方案都交给社区，所以 React 生态体系丰盛，社区强，而且每次更新改变小等 等，而 Vue 是由官网主导开发和保护，生态没那么丰盛，尽管上手比 React 简略一些，但每次更新堪称破土重来，改的倒是洒脱得很，这就注定咱们学习老本大大增加，并不能做到学习一次就能够始终应用这个框架，1.0 改版 2.0 须要重新学习一遍，2.0 改版 3.0 又要学习一遍，甚至 3.0 到 3.2 都要重学一部分，有些程序员到了 35 退休不是不想干，也是学不动了吧。像是须要记的 API，React 就那么几个，剩下的本人去写就行了，Vue 尽管在代码保护上有肯定劣势，可是它的 API 就多得多了，而且还分版本，比方 Vue2 有过滤器，Vue3 却没了，不仅要多记很多 API 和自定义指令，还须要对本人所学的 API 依据版本进行抉择应用，感觉不怎么谨严

2. 也能够将青铜级下面的某些点开展说一下细节，比方：

组件化：

• Vue2 组件说白了就是一个挂满一堆货色的 Vue 外围类，通过 new Vue() 拿到实例。就是说 Vue 组件的 script 导出的是一个挂满各种 options 的纯对象而已，所以 options API 的 this 指向 Vue 实例，这对咱们开发者来说是不通明的，须要文档能力晓得下面一堆 this.$xxx 是干嘛用的，而且 Vue 的插件也都是基于 Vue 原型类根底上的，Vue.install 挂到 Vue 实例下来嘛，以保障和第三方库的 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 的时候进行依赖收集，批改时触发 etter 主动派发更新找到援用组件从新渲染
• Vue3 响应式应用原生 Proxy 重构了响应式，一是 proxy 不存在响应式存在的缺点，二是性能更好，不仅反对更多的数据结构，而且不再一开始递归劫持对象属性，而是代理第一层对象自身。运行时才递归，用到才代理，用 effect 副作用来代替 Vue2 里的 watcher，用一个依赖管理中心 trackMap 来对立治理依赖代替 Vue2 中的 Dep，这样也不须要保护特地多的依赖关系，性能上获得很大提高
• 相比 Vue 的自动化，eact 则是基于状态，单向数据流，数据不可变，须要手动 setState 来更新，而且当数据扭转时会以组件根为目录，默认全副从新渲染整个组件树，只能额定用 pureComponent/shouldComponentUpdate/useMemo/useCallback 等办法来进行管制，更新粒度更大一些

Diff 算法：

• Vue2 是同层比拟新老 vnode，新的不存在老的存在就删除，新的存在老的不存在就创立，子节点采纳双指针头对尾两端比照的形式，全量 diff，而后挪动节点时通过 splice 进行数组操作
• Vue3 是采纳 Map 数据结构以及动静联合的形式，在编译阶段提前标记动态节点，Diff 过程中间接跳过有动态标记的节点，并且子节点比照会应用一个 source 数组来记录节点地位及最长递增子序列算法优化了比照流程，疾速 Diff，须要解决的边际条件会更少
• React 是递归同层比拟，标识差别点保留到 Diff 队列保留，失去 patch 树，再对立操作批量更新 DOM。Diff 总共就是挪动、删除、减少三个操作，如果构造产生扭转就间接卸载从新创立，如果没有则将节点在新汇合中的地位和老汇合中的 lastIndex 进行比拟是否须要挪动，如果遍历过程中发现新汇合没有，但老汇合有就删除

钻石级

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

1. 以突出核心思想和设计理念结尾：

我感觉最次要就是核心思想和设计理念上的区别，React 一开始定位的就是 UI 开发的新思路，这种思维说白了就是要扭转开发者，我制订规定，你们都照我的来，因为背靠大公司 (facebook)，所以不缺用户，而 Vue 是尽可能升高前端开发的门槛来适应不同的开发者，让开发者怎么爽怎么来，正是因为这种设计理念上的差异对后续设计也产生了一些不可逆的影响，或者说这两框架后续架构的变动都是围绕这个来的。

2. 以突出数据管理结尾：

我感觉这两最次要的区别是在数据管理形式上，尽管都是数据驱动，但 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 在更新时性能优化方面须要的心智累赘可能会少那么一点，特地是 Vue3，而 React 如果不留神，容易导致一些组件无用的 Diff，但其实理论我的项目中真正能遇到这种性能瓶颈的也是极少数，所以 (这里有两种说法)：

(如果公司次要用 Vue 技术栈的话 )：所以总的来说我感觉 Vue 性能上会更有劣势一点，特地是 Vue3 更加灵便，有很好的可扩展性，同时有更快的渲染速度和更小的打包体积。从 mixins 到 HOC 到 render props 再到 hooks，React 根本曾经废掉了过来很多基于组件的逻辑形象模式，抹掉了 JSX 比照模板的一个劣势，Vue3 中当初也都能做到，所以我会偏差 Vue3。

(如果公司次要用 React 技术栈的话 )：所以总的来说我感觉要是一些不大的零碎或者 H5 就用 Vue，因为不论是上手还是开发难度上都很简略，开发效率也高嘛，而且它有更小的打包体积，毕竟在挪动端网络差别大的状况下，资源体积是十分重要的。但像是一些中后盾零碎，或者一些大点的我的项目，会越做越大的，多人合作开发的，就用 React，因为它的函数式编程有更加灵便的构造和可扩展性，丰盛的生态圈和工具链，解决方案多，前期也更不便迭代与保护，还实用原生 APP，所以我会偏差 React。

你感觉这两框架哪个厉害

这个，我感觉吧，咱们探讨这个问题的时候，可能因为咱俩对于这一块儿的信息不对等，只是表白本人想法的话，有可能会变成两个营垒的，而且即便证实了一个比另一个牛比，也不意味着我的我的项目就牛比了，反正好用就都学，让本人变得厉害才更靠谱一点

结语

如果本文对你有一点点帮忙，点个赞反对一下吧，你的每一个【 赞 】都是我创作的最大能源 ^\_^

更多前端文章，或者退出前端交换群，欢送关注公众号【 沐华说技术 】，大家一起独特交换和提高呀