🤣 想让孔乙己教你实现 Vue 赛博按钮，结果发现 AI 比孔乙己还牛

[ParkinLin]

00. 导读

大家好，我是大家的 林语冰。

今年的 VueConf 大会上，“Vue 之父”尤雨溪上提到，Vue 是唯一一个同时支持 SFC （单文件组件）和 JSX 的框架。

此外，我们都知道，Vue 3 还同时支持两种不同风格的 API —— 选项式 API 和组合式 API 。

这意味着 Vue 组件的实现方案相对丰富，也意味着打工仔的学习曲线和维护成本与日俱增。

一方面，你可能已经熟悉 Vue 3 ，但公司的旧项目出于兼容性考虑还在使用 Vue 2 ，这需要“优雅降级”；另一方面，公司也可能要求你将兼容性要求不高的旧项目从 Vue 2 升级到 Vue 3 ，这需要“渐进增强”。

上述需求十分常见，但每次降级或迁移都去翻阅文档，再由人工重新发明一遍组件，开发效率比较落后。对于这种有规则可循的重构需求，让 AI 去学习和生成代码，我们只负责摸鱼（ Code Review 代码审查），生产效率会大大提升。

在本文中，我们会实现一个 Vue 赛博按钮组件，然后让字节的 MarsCode 化身孔乙己，只不过科普的不是“茴字”的不同写法，而是 Vue 组件的不同写法。

你会发现，编程助手不仅可以辅助我们重构，还能提供一定的优化，最终证明 Vue + AI = KPI 。

01. 赛博按钮组件

假设公司的旧项目使用了 Vue 2 + 选项式 API 的方案，需求是升级一个赛博风格的按钮组件。

这个按钮点击之后会切换文本和样式，效果如下：

使用选项式 API 风格对应的基本代码如下：

如果你不懂选项式 API 也没关系，遇事不决问 AI ，以 MarsCode 为例，它会给你 Vue 2 的代码模板，你只需要根据需求在示例代码上修改即可。

另外，MarsCode 还会给代码提供注释，辅助你理解代码和项目架构。

02. AI 自动重构和优化

在公司拉取到 Vue 2 代码之后，领导要求升级为 Vue 3 的组合式 API ，这时候我们就可以召唤 AI 了。

MarsCode 的使用十分简单，可以在网页在线直接体验，也可以在地表最强 IDE VS Code 里使用 MarsCode 扩展，登录后就能以对话的方式使用。

我个人比较喜欢直接在 VS Code 中使用，这样可以减少我们在 VS Code 和浏览器界面反复横跳的频率，而且 MarsCode 支持生成代码后一键插入当前文件，无缝集成特别方便。

这里我要求 MarsCode 根据选项式 API 的 ButtonOptions.vue 组件，重构为组合式 API 的等价代码，结果保存为 ButtonComposition.vue 组件。

template 部分不变，这是它生成的 script：

这里我把样式修改为粉色，按钮文本则从 选项式 修改为 组合式，方便大家区分，具体效果如下：

MarsCode 并不局限于 API 风格的重构，还会尝试优化我们的代码。

比如前文选项式 API 的代码写得比较随意，MarsCode 发现 if-else 分支的逻辑存在优化空间，它就帮我们简化为更优雅的三元表达式。

可以看到，优化后的代码只需两行就搞定了。

03. AI 的优势和短板

Vue 3 还提供了一个 <script setup> 语法糖，那么 AI 能不能用这种更新的语法来“渐进增强”呢？答案是肯定的。

我让 MarsCode 把组合式 API 重构为 <script setup> 语法糖版本，结果如下：

有趣的是，AI 这次没有明显的优化，但是它有时会选择帮我们把按钮的逻辑部分封装为组合式函数，方便我们抽离复用。

这种封装对于一次性的业务需求意义不大，但对于可复用的功能逻辑就很有必要，这里是我手动修正后的结果。

另外，在导入 ref 等响应式 API 的时候，MarsCode 把 computed 也一起导入了，但我们根本没用到这个 API ！

这可能是 AI 目前生成代码的“惯性思维”，不会向我们一样特别在意“死代码”。

虽然在构建时，Vite 等工具支持 tree-shaking 优化，会自动把“死代码”去除。但如果 AI 在开发阶段就能直接解决，就更完美了，因为这可以减少我们的构建时间，这是 MarsCode 目前可以优化的方向之一。

另一个值得权衡的问题是，我的样式代码使用了 CSS 变量，方便复用统一的颜色，这种封装符合“DRY 原则”，不要重复使用相同的颜色。

但是 MarsCode 在重构的时候直接把我的 CSS 变量“优化”掉了，然后把颜色变量直接填充到样式代码中，反而不利于人类来维护。

换而言之，MarsCode 把构建阶段的活提前干完了，但结果却好心办坏事。

高潮总结

业界说，AI 不会淘汰程序员，但 AI 会淘汰不会 AI 的程序员，果然有几分道理。

毕竟，MarsCode 或多或少会基于 GitHub 等全球高质量开源项目去训练和学习，在编程方面的经验绝对比我们更丰富。

虽然 MarsCode 目前的体验并不完美，部分需求也和我们不太契合，但它在大型项目迁移和重构方面的效率还是非人工所能比拟，而且 AI 的学习速度有目共睹。

可以预见，AI 会成为我们越来越可靠的编程助手，希望大家可以多多接触，提前培养 AIGC 时代的编程习惯。

我是大家的 林语冰 👨‍💻，欢迎持续 关注 我，随时了解海内外前端开发的最新情报。

谢谢的大家点赞、留言和友情转发，你的支持是我们保持更新的最大动力，我们下期再见~👍

#豆包 MarsCode 上新 Workspace#