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

245 阅读5分钟

00. 导读

大家好,我是大家的 林语冰

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

01-sfc.png

此外,我们都知道,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 的方案,需求是升级一个赛博风格的按钮组件。

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

01-btn-options.gif

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

02-options.png

如果你不懂选项式 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 组件。

03-mars.png

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

04-compose.png

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

05-btn-com.gif

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

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

06-else.png

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

03. AI 的优势和短板

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

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

07-setup.png

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

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

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

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

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

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

08-css.png

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

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

高潮总结

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

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

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

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

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

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

#豆包MarsCode 上新 Workspace#