如果我的分享对你有帮助，请关注我，一起向上进击。
本文作者：Cali
原文：https://cali.so/blog/react-or-vue-my-take-on-web-dev
最近我在恶补前端方面的知识，创造前端大神们做出来的项目真的是太故意思了。后面我也会陆续开始分享一些前端干货，希望大家喜好。
本日禀享的这篇文章，作者是Cali，深圳佐玩创始人。目前带领着佐玩致力于创造一个充满创造力的事情环境，同时鼓励团队创造影响天下的产品。
作为一名长期的前端开拓者，我想聊聊我对前端框架 React.js 和 Vue.js 的一些个人意见以及不同方面的比拟。
Web 前端可谓是目前最卷的一个领域，没有之一。这个领域的更新与变革速率也是快的惊人，当代框架与新工具玲琅满目，多到让许多讲中文的开拓者学到了无数的新英语词汇 😅。
接下来让我们来一段绕口令：
React，Vue，Svelte，Angular，Preact，Solid，Qwik，Lit，Ember，Alpine。。。
Webpack，Vite，Rollup，esbuild，Parcel，Babel，Vitest，Jest，Playwright，Cypress，ESLint，Prettier，Husky，rspack，Rust everything。。。
我这也只是列出了一些常见的前端框架和工具，可怜可怜前端开拓者吧，我们实在挺不随意马虎的。
但是，本篇文章想借此机会来聊聊目前前端最火的俩框架，同时也是我碰着的前端开拓初学者问的最多的问题：我该用 React 还是 Vue。
在我正式磋商这两个框架之前，可能有人会问：“你不是一贯用的框架都是 React 吗？你哪来的资格谈比拟？”
那么我们就不妨先从我跟 Vue.js 的经历提及吧。
Vue/Nuxt 对我的影响早在 2015 年的时候，我当时在用 Laravel/PHP 开拓海内的 Abletive 音乐社区旗下的各种站点，打仗到了 Vue.js，我记得那时侯
Taylor Otwell （Laravel 作者）大力实行 Vue.js 作为各种 Laravel 新项目的脚手架，让我产生了很大的共鸣。
当时还在用 jQuery 的我学了一些 Vue.js 0.1 的功能往后感叹到：原来前端可以这么大略？
从那时起，统统前端我都开始用 Vue.js 去写了。
韶光快进 2 年，我来到了美国西雅图，当时给西雅图城市大学做了个校内图片分享平台（类似校内 Instagram）毕设项目，也是基于 Laravel + Vue.js 的。
因此我也得到了一些认可，然后便有了一次在校内 workshop 演讲的机会，以是我当时就来考试测验布道一下我最喜好的两个框架。
再快进 2 年，2019 年，我当时在 very very spaceship 这家西雅图确当地游戏事情室事情的时候，由于当时我们在开拓「Transformers: Heavy Metal」游戏（一款类似 Pokemon GO 的 AR 地理手游），我专门花了一个星期用 Nuxt.js 来重写了游戏管理后台的所有界面和架构。（由于现有的后台实在是太丑了，想象一下页面都是纯 HTML 毫无 CSS 那种。。。）
这里由于保密关系没有任何可展示的内容，但是我当时成功地推进了全体游戏后台的易用性和都雅性，如果没有 Vue 和 Nuxt 的开拓体验我该当也是做不到这么效率的。
同时我也成功地把 Vue.js 安利给公司里所有的后端工程师，由于接下来要掩护以及添加新功能的会是他们 🤣，从此往后 Vue 变成了我们后端必须节制的技能之一。
后来我还用自己的设计技能轻微考试测验做了一套视觉升级改版：
说了这么多，实在我想表达的便是：我爱 Vue.js，我也很爱 Nuxt.js。
他们给我在我早期 “上道” 前真个时候的帮助无可厚非，以是到现在我也还在给 Evan You 和
Anthony Fu 每月 Sponsor 资助，最近也刚好开始给 Daniel Roe 和 patak 支持资助，以表我的谢意。
以是在这里我也呼吁有能力的开拓者 / 公司，特殊是由于这些伟大无私的开源项目而得到很多业务与商业成功的，在力所能及范围内尽可能地回报一下他们，由于做开源库是真的非常不随意马虎。
正式打仗 React我其实在 2018 年的时候就已经打仗 React 了，当时用的是 Preact 给 Microsoft Mixer 开拓直播室即连的前端操控绑定，以达到可以做到玩家只需进入直播间即可加入游戏并且在 Web 中操控游戏里的某个角色。
整体给我的初感想熏染便是，React 好难用，写的代码量也厚重。（当时还没有 React Hooks，全是 Class Component，this.setState 什么的也是很难用的觉得）
有的时候便是，如果你没用过难用的东西可能很难明获得为什么另一个东西更好用，去感谢另一个东西的美好。
而我真正第一次被惊艳到的是随着 React Hooks 的推出，全体 React 社区开始一窝蜂地往这个 “新” 的函数式编程不断靠拢，的确会比之前的 Class Component 好不少。
随后我看到 Vue 3 的一些理念虽有类似，但末了也还是走出了 Vue 自己的风格，我也比较喜好其新的 Composition API 以及新的范式，而不是旧的那套 Options API。
再后来我打仗到了 Next.js，再结合当时 Vercel 还是叫 ZEIT（德语的 Now）的 PaaS 平台来一键支配网站的体验切实其实不能更好，让我从此爱不释手。（实在这个时候 Vue 3 已经出了，然而 Nuxt 3 迟迟不出，等到我花儿都谢了，然后我就正式跳转到 React.js/Next.js 的拥抱中去了 😅）
没有完美的框架在我们正式比拟 React 和 Vue 之前，须要明确的是，框架只是完成目标的一种手段 / 方法，要合理看待每个框架的优缺陷，自己考试测验去利用它们，这样才能更加清楚哪些框架才是更适宜你自己的。
在利用各种不同的框架的时候，不要只学在框架中的知识和技能，要尽可能地节制 framework agnostic （框架无知性）的通用知识技能，比如总结出设计模式，办理方案最佳实践等等。
这样子的好处是，你不仅仅是节制了 “某某” 框架，而是节制了前真个核心技能，这样就算你在须要切换框架的时候，也能得心应手。
让我想起 Tony Stark 在《Spider-Man: Homecoming》电影里中的台词：
If you’re nothing without the suit, then you shouldn’t have it.
这在工程师领域也是一样的，如果没了框架你就不会做前端了，那你就不应该用框架。
聊聊市场产品现状我创造了一个比较神奇的征象，那便是国际化的产品普遍利用 React 的概率非常的高。
把稳这里列举的紧张是国际化产品或 SaaS
我在这里轻微列举一下：
Twitter，Discord，Slack，Figma，Framer，ChatGPT，Medium，Notion，Sentry，Vercel，CodeSandbox，Linear，Raycast，Fey，Liveblocks，Clerk，Resend，Diagram，Evervault…
等等等等还有好多我相信我无法在这个页面里列举完。。。
用 React 去构建产品的前端仿佛在 2023 已经成为了默认的选择，随着最新的 React Server Component 也重新推动了纯做事端渲染的范式，让前端与后真个分边界越来越模糊。
在 Vue 这边的话：
OpenAI 首页，TikTok For Business，Google Careers，Ecosia，GitLab，Apple 的 SwiftUI 传授教化 / 文档，Icons8，Upwork，Volta，PornHub…
在这个比拟的场合排场里 Vue 的出色产品，还是少了一些，也正是我不解的地方。当然这里跟我所打仗到的产品局限性也有一定的关系，欢迎在评论中补充。
由于框架本身是很好的，却为什么引发不了让更多的公司去用 Vue 来打造产品 / SaaS 呢？
设计工程师由于我这个人在开拓和技能之外，也非常看重美学。以是我会非常神往在开拓的同时不失落好看又好用的界面设计与用户交互逻辑，我在利用产品的时候也自然会带有很高的标准去评判他们，末了才能决定让我是否能长期利用下去。
而我所理解并且非常崇拜的 Design Engineer（设计工程师）们基本上都是清一色用 React 作为他们的工具来写网站或者运用的，这也是我所不雅观察到的一个很神奇的征象，这大概也跟上面的产品现状有着异曲同工之处。
比如有：Rauno，Paco，Shu，Joe，Emil，Jordan，Brotzky，Marc 等等。
然而在 Vue 这边，设计不错的在我的认知里目前就只有 Anthony Fu 了。
以是如果你很看重产品以及设计这一方面的话，目前的胜者是 React。
聊聊多用性我们接下来看一看两个框架在 Web 以外的领域表现的如何。
首先是 React：
写统一代码的 iOS 和安卓运用？可以用 React Native。 写邮件模板？可以用 React Email。 写命令行运用？可以用 Ink。 然而如果说用 Vue 写移动端运用的话，目前就只有 NativeScript 支持的最好，但是目前市场上也没有 NativeScript 所开拓出来的精良运用，以是这方面在 Vue 社区的表现就略显尴尬。
而用 React Native 写的移动端作品集就比较丰富了，比如：Instagram，Facebook，Pinterest，Tesla，Uber，Discord 等 app 都是用的 React Native 开拓的。
那么在一学多用性而言，胜者是 React。
聊聊开拓者体验（DX）众所周知，React 和 Vue 都分别有对应的 dev tools 浏览器插件。
然而最近的 Nuxt DevTools 实在是太强大了，每个功能都看得我垂涎欲滴，让我不得不说 React 这边对本地开拓工具真的是太不重视了，或者说是时隔这么多年还是千篇一律的工具体验。
其次的话便是 React 对初学者来说可能有比较陡峭的学习曲线，特殊是对 JavaScript 和 JSX 还不是很熟习的开拓者而言。在这块 Vue 就相对而言初次学习曲线比较平滑，能更加轻松地上手（最少我自己早期学习的时候便是这种觉得）。
在 React 项目中，常常会须要写更多行的代码，以及承受一些 useEffect，useMemo，useCallback 等等的心智包袱，你须要自己管理 dependencies 依赖，从而达到 “最佳的优化”。那么在学习的路上自然的也会变得相对而言更加繁芜一点，不过一旦你 master 了这些 React 中的奥秘，那你才能真正节制用 React 写出高效运用的核心。
其余一个挺主要的方面便是 —— 文档。
React Hooks 在出了往后的五年内都没有很清晰的出官方系统化的文档和传授教化，导致了很多开拓者在学习的过程中产生困惑和无头绪，最新的
React 官方文档也才是在 2022 年开始重写了一遍，2023 年才正式发布，并且优先地推举了 Hooks 而不是 Class Component。而 Vue 这边的文档一贯都是很被核心团队所重视的，无论是最新的观点，还是阐明 Vue 的核心相应式根本，Vue 的官方文档都阐明的比较清晰也比较全面。
以是如果你非常看重开拓者体验的话，胜者是 Vue。
聊聊生态React 的生态非常的丰富，开拓者基数第一也一定地导致了更多的开拓者为这个框架建立起了各种大大小小的工具库。
往大了说有 Vercel 投入 Next.js 的开拓，到有 Poimandres 出的一系列的工具链（jotai，zustand，react-three-fiber 等等），还有像 WorkOS 精心打造的无障碍无样式 UI 库 ——Radix UI，末了还有像 shadcn 一样的独立开拓者出的复制粘贴 UI 最佳实践。
不过在 React Server Component 推出往后，很多写库的开拓者也陷入了窘境，'use client' 门事宜也是蛮尴尬的，觉得跟 Vue 2 迁移 Vue 3 那会儿有一点点类似，我以为很多大改动还是该当利用渐进式支持（Progressive adoption）会更好。
Vue 这边的话，虽然没有特殊大的公司在做精良开源库的创建与掩护，但是有 Vue、Vite、Nuxt 核心团队成员和社区一起共建的开源军火库，虽然不是最大的生态，但一定都是 Vue 开拓者们最满意的。Nuxt Labs 所做的每个模块和插件，也都是非常高质量的，比如说 NuxtLabs UI，Nuxt Studio 都是光鲜的例子。
以是其实在我看来，React 和 Vue 在生态都是胜者。
结尾如果这么看下来的话，目前前端框架的赢家很明显是 React，但这不代表着 Vue 就输了，由于 Vue 的未来还是很可期的，只不过须要更多的开拓者来丰富这个社区，更多的大企业来信赖地利用 Vue 构建大型运用并且推崇出去。
我希望 Vue 的来日诰日更美好，我也希望能够看到更多精良的产品扎根于 Vue/Nuxt 中，也更加希望能看到有更多的设计大牛们涌如今 Vue 的生态圈中。
但最少目前为止，由于 React 的生态现状，精良产品的影响力，以及非常多的设计大牛的驱动，会让我暂时连续呆在 React 圈中。
无论如何，我希望框架之间末了能带来更多的良性竞争，相互使令对方变得更好，哀求更高，这样才能受众绝大多数的 web 开拓者们，让我们的开拓更加轻松和随意马虎。
末了对付这两个框架，大家怎么看呢？欢迎在评论区留言！
文章已经看到这了，
- EOF - 点击标题可跳转 见告你更多细节干货
欢迎围不雅观我的朋友圈👆
每天更新所想所悟
