AI 解决不了一切：从 3D 展示的效率神话到 Vue 2 监听失效的“抓瞎”

如今，AI 编程工具（如 Gemini 3.6、Claude 4.6 等）已经成为了绝大多数开发者的生产力标配。在不少特定场景下，AI 展现出来的效率极其恐怖，甚至能创造出“降维打击”般的开发速度。

然而，在日常真实的复杂项目重构与调试中，我们也经常会撞上一面墙：AI 并不是万能的银弹（Silver Bullet），它解决不了一切问题。

本文将结合真实体验，辩证地聊聊 AI 特别“牛逼”的地方，以及在遇到隐蔽 Bug 时为什么依然离不开程序员的深度分析能力与“古法手搓编程”。

一、辩证来看：AI 真正“特别牛逼”的场景

在谈 AI 的局限之前，必须承认，AI 在处理新模块开发、样板代码生成以及复杂可视化场景时的能力简直神乎其神。

真实案例：Web 3D 模型展示开发

假设公司突然要求在网站中实现一个交互式的 3D 模型展示（基于 Three.js / WebGL）：

以前纯手写：开发者需要去啃 Three.js 繁琐的 API 文档，手写渲染循环、配置场景光照（Ambient Light / Spot Light）、调整 Perspective Camera 相机视角、加载 GLTF/GLB 3D 模型，还要处理各种轨道控制器（OrbitControls）的交互逻辑。没有 3D 渲染经验的人，折腾 2 周都不一定能顺畅做完。
现在交给 AI：你只需要用自然语言描述：“帮我用 Three.js 写一个带有金属质感、鼠标可旋转缩放、自带渐变阴影的 3D 模型展示组件”。短短 1 个小时，全套渲染代码就写出来了！

更厉害的是，当产品经理（PM）提出各种细节微调时：

“这个材质能不能再光亮一点？”
“模型旋转的阻尼感能加一点吗？”
“相机初始视角再抬高 15 度。”

过去程序员可能要翻源码改半天，现在直接把 PM 的要求原封不动扔给 AI，几分钟内就能迭代出新版本，直到调整到产品经理满意为止！这种生产力释放，确实让人惊叹。

二、另一面：AI 改 Bug 卡住与 Token 暴跌的“抓瞎”

虽然在 3D 模型展示这样的样板代码构建上 AI 强得可怕，但在面对隐蔽的逻辑死角时，即使你持续向 AI 提供了非常详细的背景知识与上下文，AI 也会改得陷入死循环，白白消耗大量 Token 却完全找不到根因。

真实案例：Vue 2 同一 Key 重复声明 watch 导致监听与存储失效

前阵子在维护一个旧的 Vue 2 项目时，遇到了一个极其诡异的问题：

用户修改了页面配置，但更改死活无法同步持久化存储到 LocalStorage 中，刷新页面后配置全部丢失。

我把组件源码、Storage 工具类甚至详细的业务背景知识全盘喂给了最新的 Gemini 3.6 模型，希望能通过 AI 迅速定位解决。

AI 的死循环与 Token 暴跌：

持续陷入死循环：AI 怀疑是响应式数据没触发更新，开始大改 Vue.set、改写 mounted 钩子、重构 LocalStorage 的写入防抖逻辑；
消耗大量 Token 毫无建树：虽然我不断补充极度详细的运行背景和代码片段，AI 却一轮轮输出几百行修改方案，白白暴涨消耗了大量 Token，改了好几个版本问题依然原封不动。

人工“古法排查”发现的真相：

看着 AI 不断在错误的道路上狂奔，我决定停下 AI 对话，采用人工断点与源码审查的“古法”方式分析。

最终我亲自发现，问题的根因极其隐蔽：

在该 Vue 2 组件中，同一个 Key 被写了多次 watch 监听！

javascript

export default {
  data() {
    return { config: { theme: 'dark' } }
  },
  watch: {
    // 第一次定义监听器，处理保存到 LocalStorage
    'config.theme'(newVal) {
      saveToLocalStorage(newVal);
    },
    // ... 中间隔了较长代码
    // 第二次重复定义了同一个 key 的 watch 监听！
    'config.theme'(newVal) {
      console.log('Theme changed');
    }
  }
}

在 Vue 2 的组件选项对象中，watch 本质是一个 JavaScript 对象。由于重复书写了相同的 'config.theme' 键，后定义的空逻辑 watch 悄悄直接覆盖了先前写好的包含 saveToLocalStorage 的核心监听函数！

AI 盲目依赖上下文概率生成，无法敏锐地识别对象属性名在编译前被覆盖的死角，导致不管你喂给它多详细的背景知识，它也只能在响应式和存储方法外围“打转转”。

三、微调 UI 细节时 AI 的“抓瞎”

另一个常让 AI 掉链子的场景是复杂的响应式 UI 细节与微调。

例如处理重叠图层布局、绝对定位居中边界、防抖滚动联动或复杂的 CSS 动画时，AI 的表现常常非常“拙劣”：

你让它修补左边 2 像素的边距，它会顺便把你右边的自适应弹性盒子给改崩；
你让它调整 CSS 样式，它会直接给你套上一层臃肿、毫无必要的 JS 计算属性。

遇到这种细微的视觉与交互体验问题，最快、最优雅的解决方案依然是古法编程：

按下 F12 打开浏览器开发者工具（DevTools）；
审查 DOM 元素与盒子模型（Box Model）；
手动调试 CSS 样式，编写精确的定位计算代码。

AI 时代的程序员底层壁垒

新业务与复杂 3D/组件搭建：放手交给 AI。利用 AI 1 小时搞定手写 2 周的工作量，并快速响应 PM 需求；
疑难死锁 Bug 排查：及时止损，切换古法。当 AI 改了两三轮依然在原地打转时，果断停止喂 Token，靠人工断点与逻辑推演去找到对象的根因。

驾驶盘永远在开发者手里。既能驾驭 AI 的神速，又能在 AI 抓瞎时上手打硬仗，这才是 AI 时代程序员的核心壁垒。

AI 解决不了一切：从 3D 展示的效率神话到 Vue 2 监听失效的“抓瞎” ​

一、 辩证来看：AI 真正“特别牛逼”的场景 ​

真实案例：Web 3D 模型展示开发 ​

二、 另一面：AI 改 Bug 卡住与 Token 暴跌的“抓瞎” ​

真实案例：Vue 2 同一 Key 重复声明 watch 导致监听与存储失效 ​

AI 的死循环与 Token 暴跌： ​

人工“古法排查”发现的真相： ​

三、 微调 UI 细节时 AI 的“抓瞎” ​

AI 时代的程序员底层壁垒 ​

💡 内容推荐