AI 写 React 比 Vue 更好？一份基准测试引发的框架选择思考

译注：本文翻译自 dev.to 作者 Nazar Boyko 的文章，原文发布于 2026 年 9 月 29 日。原文链接：https://dev.to/nazar-boyko/the-ai-writes-better-react-than-vue-5a9n

2025 年 5 月，字节跳动的一个团队发布了 Web-Bench，这是一个编码基准测试，其附录中藏着一个不寻常的细节：它把相同的任务交给四个 UI 框架（React、Vue、Angular 和 Svelte），并用端到端测试检查每一个结果。在整体结果中领先的模型是 Claude 3.7 Sonnet。在关闭 thinking 的情况下，它在 React 中通过了 65% 的任务，而在 Vue 中只通过了 30%。

作者也在自己的两个项目上做了测试，结果印证了这一点：AI 对 React 项目的理解确实更好。

以下是论文附录中的完整表格。数字为通过率百分比，以五次运行的 pass@2 衡量：

模型	React	Vue	Angular	Svelte
Claude 3.7 Sonnet (thinking)	60	40	50	55
Claude 3.7 Sonnet	65	30	40	25
Doubao 1.5 Pro (thinking)	50	40	25	40
Doubao 1.5 Pro	35	35	5	10
GPT-4o	35	30	5	20
DeepSeek-R1	40	30	30	40

样本量不大。每个框架只有一个包含二十个任务的项目，所以五分大约相当于一个任务。排名也并不干净——Svelte 在六个模型中有两个击败了 Vue，尽管使用它的人少得多。但 React 在列表中每个模型上都达到或超过 Vue。论文作者给出的第一个解释也是任何人都会猜到的：React「为 LLM 训练提供了最大的数据集」。

这与作者在工作中的观察一致。助手生成的 React 代码通常读起来就像最近有人写过一样，而在 Vue 中，偏差更为常见——这些偏差往往看起来像是有人使用了已不存在的 Vue 2 模板，或者在一个组件中混合了两种 API 风格。不算严重，只是需要检查的地方更多。

于是，一个没人愿意大声说出来的标准悄悄进入了框架选择：AI 更擅长它。这是选择框架的正当理由吗？不。它是一个正当的输入，却是一个糟糕的决定性因素。

模型读过的 React 多得多

从 GitHub 的一些基本统计来看，星标数几乎反映不出这种差异。论文列出 React 为 23.5 万星，Vue 为 20.8 万星，但星标衡量的是关注度，而模型是从人们实际编写和发布的代码中学习的，所以差距存在于使用量中。

在 2025 年 Stack Overflow 调查中，44.7% 的受访者使用 React，17.6% 使用 Vue。在 npm 上，2026 年 9 月 21 日至 27 日这一周，React 获得了约 2.03 亿次下载，Vue 约 1800 万次。这与作者此前比较两个框架时出现的约 11 倍差距一致。

Vue 还背负着一个 React 基本没有的历史问题。Vue 2 于 2016 年 9 月发布，一直支持到 2023 年最后一天，而 Vue 3 直到 2020 年 9 月才推出，并移除了一些 Vue 2 代码依赖的东西（$on 事件方法、filters、$set）。因此整整四年间，互联网上几乎所有新的 Vue 教程、回答和公开仓库都是为 Vue 2 编写的，其中一些教学内容已经不再有效。

Vue 3 还有两种官方编写组件的方式：Options API 和 Composition API，两者都完全支持（文档甚至指出 Options API 是构建在 Composition API 之上的）。所以模型训练数据中有三种 Vue 方言。混合使用它们，正是作者对一个多年来同时见过这三种用法的模型的预期。

React 也有旧方言。类组件遍布公开代码，React 团队直到 2025 年 2 月才弃用 Create React App。区别在于比例——hooks 时代的 React 代码太多了，以至于当前惯用法通常胜出。

支持「是」的理由是真实的

在同一份调查中，开发者对 AI 工具最常见的困扰是「AI 解决方案几乎正确，但不完全正确」，66% 的人选择了它。45.2% 的人表示调试 AI 生成的代码需要更长时间。这就是为什么如果一个项目最近才更新到 Vue 3，但某些组件或服务仍使用 Vue 2 方式，那么每个这样的实例都需要代码审查。每一个都要花一次阅读和一次重新提示，跨团队和一年下来，这会累积成真实的工作时间。

上手成本是另一半。一个 React 代码库的新人如果依赖助手，学到的是当前的 React。同一个人在 Vue 代码库上，可能学到的是 Vue 2 和 Vue 3 的混合体，且无法分辨哪些是哪些。对初级开发者来说，这可能比没有帮助更糟，因为旧惯用法带着与当前惯用法完全相同的自信出现，diff 或通过的测试都不会告诉他们刚学到的是哪一种。

混合风格的组件是更隐蔽的问题。它通常运行正常，只是让后续每个读者的工作更难，而且它因为能工作就被合并了。

所以，如果一个团队在两个都能同样接受的框架之间选择，并且大部分代码将用助手编写，那么选择助手写得更好的那个并不愚蠢——这是一种成本，和其他成本一样，应该纳入这样的决策。

按语料库选择会喂养语料库

第一个问题是：因为模型读过最多而选择某个框架，这是一个循环。流行的选项被写进更多代码，下一代模型在这些代码上训练并变得更擅长它，这又推动更多人选择它。

Lovable 是一个 AI 应用构建器，2025 年 2 月它解释了为什么生成 React。它给出的理由一句话概括了这个循环：在代码上训练的模型「由于 React 在在线资源中的主导地位，能够生成高质量的 React 代码」。所以这类工具产出的应用是 React，其中一些被推送到公开仓库，而公开仓库正是下一代模型寻找学习代码时阅读的东西，循环继续。这不是阴谋——循环中每一步单独看都是合理的。

还有第二个齿轮，更令人担忧。教会模型人们真正如何使用框架的公开问答正在枯竭。PNAS Nexus 的一项研究发现，ChatGPT 发布后六个月内，Stack Overflow 的活动下降了 25%，相比之下，ChatGPT 难以获取的俄罗斯和中国问答网站则没有这种下降。作者自己的结论是：「开放数据产出的减少将限制未来模型的训练。」

React 在那之前就建好了它的公开答案之山。下一个框架必须在人们向聊天机器人提问而非发帖的世界里建立自己的积累，而聊天机器人私下回答，没有人会在三楼评论中写出下一个模型本可以学到的更好答案。如果每个人都按语料库大小选择，新事物永远不会有语料库。

模型几个月就变，框架留存数年

第二个问题是时机。再看那个在基准测试中领先的模型。它的 API 名称是 claude-3-7-sonnet-20250219，Anthropic 的弃用页面将其列为 2026 年 2 月 19 日退役——正好是名称中日期的一年后。之后对它的请求就会失败。

Vue 2 从 2016 年 9 月支持到 2023 年 12 月 31 日，超过七年。今年选择的框架很可能在代码库中留存很久，远超过那些让它看起来是轻松选择的模型被弃用、退役和替换几轮之后。到那时，选择它的理由只是旧规划文档中的一行，代码是唯一剩下的东西。

差距本身也在移动，最清晰的信号来自 React 一侧。作者在项目中使用 CLAUDE.md，其中包含一段 next dev 自己写的内容，作者甚至没有注意到。它以「This is NOT the Next.js you know」开头，警告 agent API、约定和文件结构「可能都与你的训练数据不同」，并告诉它在写任何代码之前先阅读 node_modules 中捆绑的文档。连 React 最大的框架都告诉模型不要相信它学到的东西，而这还是有最大语料库的一方。Vercel 也测量了修复效果：在他们的评估中，面前有版本匹配的 Next.js 文档的 agent 达到了 100% 通过率，而最好的基于技能的设置只有 79%。

作者不知道有类似的 Vue 测量。有一个名为 vuejs-ai/skills 的社区项目，自称早期实验，位于官方 Vue 组织之外。但要点依然成立：流畅度差距是那种可能在一两个版本内缩小的事情，而没有人会那么快重新审视框架选择。

一个输入，而非决定

所以作者会把它留在清单上，只是不放在顶部。现有代码库排第一，然后是你拥有的团队和将要招聘的团队，然后是适合产品的元框架。之后才是你使用的助手写得有多好，作为成本栏中真实的一行。在两个其他方面都相同的选项之间，它是一个公平的决胜因素。

如果答案是 Vue 或 Svelte 或任何背后积累较小的东西，那就明知代价地去做：每个生成文件更多的审查时间；输出对照当前文档而非模型记忆来检查；混合 API 风格被视为真正的审查意见而非吹毛求疵。像 Next.js 现在默认做的那样，把当前文档放入模型上下文会让差距变小，尽管作者不确定它是否会归零。

作者仍然宁愿在审查时间上付出这些，也不愿因为一个最先过时的理由而选择框架。

原文链接

https://dev.to/nazar-boyko/the-ai-writes-better-react-than-vue-5a9n