File Viewer Blog

Appearance

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 暴跌： ​

  1. 持续陷入死循环：AI 怀疑是响应式数据没触发更新，开始大改 Vue.set、改写 mounted 钩子、重构 LocalStorage 的写入防抖逻辑；
  2. 消耗大量 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 计算属性。

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

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

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

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

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