大家好，这里是大家的林语冰。
免责声明
本文属于是语冰的直男翻译了属于是，仅供粉丝参考，英文原味版请临幸 Why I chose Vue over React。
引言
JS（JavaScript）生态系统的现状可不是开玩笑的 ------ 有一大坨东东：一龙一猪的库、框架以自己的方式实现一毛一样的东东。
我的个人心证是，这有好有坏 ------ 存在一大坨选择，虽然但是，对于新手攻城狮而言，这可能导致"选择困难症晚期"，因为新手往往黑白不分。当然啦，人气即正义 ------ 但祂们都人气爆棚。
私以为在这场"诸神之战"中，有两位高手独领风骚：React 和 Vue。一大坨道友在辩论其中之一是否更好，本文试图以我的知行合一为指导来揭晓此话题。
我的开端
我从 React 初出茅庐，当时知识有限，只完成了若干关于 HTML、CSS 和 JS 的必修课。由于 React 当时人气最高，私以为这是进军前端领域的必由之路。
我一头扎入才刚刚发布 app 路由器的 Next.js，开始啃文档并 DIY 我的"处女作"。那是一个致力于分享梦想的留言板 ------ 如果您可以 get 到我的意思，我勉强算卡尔·荣格的粉丝。
完成该项目我感觉自己棒棒哒 ------ 祂有授权、个人资料页面、表格和若干动画的优秀实践。如果您想查作业，这里是 任意门（现在有且仅有登陆和表格正常开工）。
虽然我已经用 React 达到预期目标，但我仍然在寻找更多的机会 ------ 那就是我发现 Vue.js 的地方。祂已经处于成熟阶段，已经完成了向组合式 API 的过渡，看起来几乎和 React 一模一样。
起初，该文档吓尿我了，但多瞄了几眼后，我就坠入爱河无法自拔，现在我当然可以说祂是我最喜欢的现代 Web 框架（没有之一）。
学习曲线
那时，我还没有真正接触过 React 的文档，而 Vue 文档是我阅读由创建者自己编写、而不是某些内容制造商编写的任何类型教程的开端。
时至今日，如果您瞄一眼已经十分成熟的 React 文档升级版，私以为就学习而言 Vue 还是更加优秀。优点如下：
- 能解答一切的文档 ------ React 的某些关键点和隐藏行为没有妥善归档，因为该文档有且仅有涵盖库的基本功能 ------ 因此，每个 React 开发人员都必须知道与现代趋势同步的奇技淫巧。
- 官方学习课程 ------ Vueschool.io 和 Vuemastery.com 是学习 Vue 的美妙开局，而 React 有若干材料，其中大部分可能已经过时了。
- 开发者友好的 API ------ 于我而言，Vue 拥有更好且差异化的工具池，您可以用祂们开发 app。从第 1 页开始，祂们有很好的说明，并且比 React 更能为所欲为地控制您的 app。除此之外，文档中没有提到太多新手不友好的隐藏内容（渲染周期、useEffect）
当然啦，学习 React 对我后来学习 Vue 帮助很大 ------ 在您打下坚实的基础并至少对一个框架有一定了解之后，您就能更快地驯服其他框架。
但即便如此，我还是会向每个新手推荐 Vue，因为就开发而言祂比 React 更宽容，而且很难搬起石头砸到自己的猫。
更好的装备
如上所述，Vue 固有的 API 比 React 更棒。此说法的几个关键点：
没有 useEffect
这意味着您不需要处理"弗兰肯斯坦（缝合怪）式"缺点，这些缺点是被那些无视 SOLID 的单一责任原则的人使用的。在 React 中，useEffect 是一把双刃剑 ------ 组件生命周期的守护者和副作用的提供者。
这段代码的作用是什么？effect（作用）！
而这段代码？effect 返回？.....
返回数组？！
当您可以拥有一个具有无限用例的愚蠢抽象时，为什么要保留所有这些 onMounted / onUnmounted / onBeforeMount / onRouteChange / watch？只想在组件挂载时触发某些东东？提供一个空数组！为什么？因为抽象！
是的，大多数 React 爱好者可能都知道某些约定，但为什么不将祂们引入库本身并获得更好的体验呢？Hook yourself.
双向数据绑定
React 使用 Flux 架构，简而言之，这意味着数据能且仅能单向流动。这样做易于跟踪数据变化的地方，因为只有单一数据源。虽然 Vue 几乎相同 ------ 但祂有祂的好处。
首先是输入绑定。使用 React，您需要编写如下内容来将输入值绑定到组件的状态：
这适用于每个输入组件。Vue 的等价功能是这样：
是的，您可以在 React 中编写一个自定义 hook 来处理所有同款功能，而不是在所有输入组件中重写它......但是何必呢？
其次是父子组件间的双向绑定，这意味着您可以通过 props 和父组件的数据通信，并通过 emits 从子组件回答父组件。在 React 中，为了处理子组件的某些数据，您可以这样写：
Vue 的等价功能类似：
哪种语法更好？假设我们 React 中有一个附带大约 20 个 props 的组件（这是一种极端情况，因为这是小概率事件，但不是不可能事件）。该组件的 props 接口类似于：
是的，您可以理解函数绑定从 on 开始，但为什么呢？没有传递给组件的函数是什么？祂会使您的 app 崩溃。在 Vue 中，这些东东会用 @ 符号来区分，并且其他每个开发者都会更好地理解到底发生了什么事。
编译器，而不是库
Vue 的另一个好处是祂为 .vue 文件提供了编译器，而不是使用纯粹的 JS 表达式。乍一听可能既变态又复杂 ------ 但在您深入了解 React jsx 的变态和我下面将提到的其他事情之后，您就会明白我的观点了。
当 jsx 加入 React 时，有些人有点反感，某种程度上祂们是对的。经典的网页设计考虑了 3 个核心部分 ------ HTML、CSS 和 JS。祂们旨在通过文件扩展名进行区分，并且关注点分离应该奏效。
虽然但是，现实世界中存在一大坨可复用逻辑，并且由于基于组件方法来创建界面的起源，私以为将祂们组合在一起是一个不错的决定，因为在三个文件之间切换（你好，Angular！）肯定不是一个好的体验。
但是 React 所做的 ------ Vue 做得更好，原因如下：
- 不需要 CSS 文件 ------ Vue 有一个 scoped 样式区块，您可以简单地设置所有样式。如果您不愿意，祂们不会在其他组件间共享。这样一来，React 的每个
CSS-in-JS库就变得过时了，您不需要只为了能够编写十行代码，过度设计和创建一大坨css modules。此外，如果您想避免使用Tailwind，您不会被迫使用（˵ ͡° ͜ʖ ͡°˵） - 更好的约定 ------ 没有
jsx，因此您不会迷路。想要让 html 标签触发某些事件（点击、选择.....）？只需添加@并处理它：
想要设置 innerHtml？别担心，您不需要记住这一点：
只需要：
写太多也很危险，懂不？
需要一大坨 classNames 吗？连接字符串！
想要另辟蹊径？使用 库！（当然了，祂的大小低于 1 kb，但祂仍是一个外部依赖）
- 属性继承的处理要好得多。举个栗子，在 React 中，要将
className传递给将来可能是动态的 UI 组件，您需要将其写在 props 中，然后将其传入组件的根 HTML 标签：
Vue 的等价功能就只需：
无需说明该组件需要占用祂。
是的，这褒贬不一，但如果您认为这是 React 更好的原因 ------ 您似乎没有为每个组件编写 prop，这些组件会有一种极端情况，祂需要一个不应该成为其主题一部分的边界。
您也可以认为有时您不需要将属性直接传递给根标签 ------ 而 Vue 为您提供了一个解决方案：
- 插槽更棒
要在 React 中将某些模板传递给子组件，您应该在组件的 props 中定义 children 属性，然后使用 jsx 大括号来渲染它：
而在 Vue 中，不仅更容易做到这一点，而且提供了更好的自由度来制作动态组件：
a. 您可以只留下 <slot/> 标签来处理 children 而不是 children：
b. 您可以有多个具名插槽：
c. 插槽可以会向父组件公开数据：
这对于孵化和其他组件梦幻联动的可复用组件非常有用（举个栗子，封装库的组件（走马灯等等......））
渲染由我
当 React 横空出世时，这是一个启示。在当时占主导地位的技术中，您必须自己编写所有重新渲染逻辑 ------ 这就出现了一个可以刷掉其他所有内容的绝对解决方案， ------ 只需重新渲染所有内容即可！
虽然祂解决了某些问题并使开发者的生活更轻松 ------ 但它必有其缺陷。与其试图追赶重新渲染，不如确保您没有重新渲染。
memo 我的屁股！祂在过去效果很好，但我们，尤其是那些刚开始写代码的人，真的不需要步人后尘。
我并不是说您不应该掌握渲染周期并了解祂幕后的工作机制，但是当某些更新更好的技术能为您做到这点时，为什么每个人还需要亦步亦趋？
尽管 Vue 的渲染机制仍然依赖于类似 React 的虚拟 DOM（尤雨溪说将在 2024 年推出新的东东），但与炫酷的 Svelte 和 Solid 不同，祂仍然比 React 好得多，因为祂不是愚蠢地重新渲染所有内容，而是做了其他事情。
编译时，Vue 会跟踪每个需要更新的 DOM 节点，当其依赖发生变化时像外科手术一样精准更新祂。没有 useMemo / useCallback 以及过多响应性过时技术导致的性能瓶颈。
在 Vue 中，您宁愿找到一种方法来重新渲染你的组件，来规避此行为，私以为这比处理作者创建的某些不变的极端情况要好得多。
内置
至于某些非常适合包含在 UI 渲染解决方案中的工具，比如 React 和 Vue，Vue 也占了上风。当我想再次尝试 React 时，有时我邂逅了某个需求，需要使用 Vue 提供的开箱即用的 诸如 Transition 组件的东东。有了祂，您可以处理正在重新渲染的组件的动画。至于每个问题，React 确实为我的情况提供了一个 解决方案库。就这样，我感动得泪中带血，我开始泣不成声，我很抱歉，所以我只用纯粹的 css 处理动画。看啊：
您可能理解了祂的作用。
React 的等价功能是这样：
想要保持组件缓存，以便祂记住之前的数据并保持更好的性能？您得安装一个库！
而在 Vue 中：
React 想出了 Suspense ------ 我很乐意！package.json 对于其中三者而言还不够大。
完结撒花
想到这篇文章，我得出了一个结论，私以为在这场框架之间的战争中最好的是 ------ 您可以为所欲为，只是殊途同归。
如果您了解某件事的基础知识，您就会冷静看待您邂逅的每个库和框架。如果您只想盯着抽象层并比较祂们 ------ 您必败无疑。
虽然但是，在选择要使用的工具时，我想在得出结论之前最好先尝试一下。
于我而言，React 感觉就像一个有技巧的老战士，但年龄越来越大，而某些新的年轻人身体状况良好，祂们没有被祂们的黑历史所束缚 ------ 祂们正在另辟蹊径。
除此之外，这位老战士是由一个组织委托的，而年轻人是大家的英雄，祂们试图在阳光下赢得自己的位置，并将一大坨人民与祂们的战斗联系起来（我的意思是，Vue 是真正的开源，没有像 Meta 这样的东东背书）。
祂们每个人都屡战屡胜，老人拥有积年累月的庞大粉丝群，而 youngun 的粉丝则尖叫着永远支持祂。
如果没有 React，很可能就不会有这种 Vue，但如果没有 Vue 和其他框架，比如 Svelte 和 Solid，就会停滞不前。
您现在收看的是直男翻译系列，学废了的小伙伴可以点赞友情赞助本系列，我们每天佛系投稿，欢迎关注和订阅最新动态。谢谢大家的彼芯，掰掰~