为什么 AI 给的代码，鼠标一点就消失了？

你有没有遇到过这种诡异的情况：

想在某网页自动化向标题控件输入点东西，直接问 Copilot，AI 很有礼貌地甩给你一段代码：

document.querySelector(...).value = 'xxx'。

你信心满满地贴进 Console 运行——成了！文字输入进去了！

正当你准备喝口咖啡庆祝时，手指轻轻点了一下页面的其他地方，或者动了一下鼠标，刚才输入的文字啪的一声，没了。

为什么“直接”输入法失效了？

原因很简单，你面对的是 Vue、React 或者 Angular 开发的“响应式”页面。

在这些框架的世界里，DOM（你看到的输入框）只是一个被动的“影子”。真正握着数据的，是框架内部的 State（状态对象）。

你刚才那行代码，只是把数据涂在了DOM上，而没写进背后的State对象里。一旦页面发生任何交互（比如你点了一下鼠标），框架就会重新“对账”。它发现账本里是空的，于是反手就是一个“一键清空”。

那么问题来了：既然我们不知道它是 Vue 还是 React，也不知道它的账本（数据对象）藏在哪里，怎么才能“骗”过框架，把数据焊死在里面？

原型链 Setter 降维打击（附硬核代码）

不需要去翻它的源码，不需要去分析它的状态库。我们要用 JS 的原型编程特性，直接在底层拦截。具体逻辑分三步：

1，抢夺 Setter：跳过当前实例，从原型链（__proto__）里挖出最原始的 value 设置器。

2，强制写入：通过 call 把我们的数据塞进去，绕过框架的浅层拦截。

3，制造“既成事实”：手动派发 input 和 compositionend 事件，告诉框架：“别睡了，数据真的变了，快同步到你的账本里去！”

代码示例（Console 专用）：

(function() {
  const el = document.querySelector('input[placeholder*="标题"], textarea[placeholder*="标题"]');
  const text = "这是我真正写入的数据";

  // 1. 设置 value（必须从原型链上挖 Setter，直接赋值会被框架拦截）
  const setter = Object.getOwnPropertyDescriptor(el.__proto__, 'value').set;
  setter.call(el, text);

  // 2. 派发 input 事件（这是触发布全量同步的关键）
  el.dispatchEvent(new Event('input', { bubbles: true }));

  // 3. 中文场景必杀技：模拟合成结束
  el.dispatchEvent(new Event('compositionend', { bubbles: true }));

  // 4. 兜底：触发 change 事件
  el.dispatchEvent(new Event('change', { bubbles: true }));

  console.log(" 写入成功！即使 React/Vue 渲染也不会消失了。");
})();

经验，仍然是 AI 时代的“硬通货”

这段代码不难，但为什么很多人试了半天也不一定能搞定，即使用 AI 也是如此。现在 AI 是很强大，但开发中有些问题，还是需要经验的。

经验在 AI 时代有两个不可替代的价值：

1，诊断力：知道问题为什么出现（比如识别出是响应式状态同步问题，而不是简单的选择器失效）。

2，提问力：知道该怎么提问（如果你只会搜“JS 输入不生效”，AI 会给你推一堆垃圾代码；如果你搜“React input setter hack”，答案秒出）。

如果你连问题出在哪都不知道，你根本无法向 AI 下达精准的命令。

一切都是为了效率。如果不能在 3 分钟内解决这种“见鬼”的小问题，拥有再强的 AI 也是徒劳。真正的效率，是让 AI 成为你的助手，而“经验”能让这个助手高效发挥作用。

2026年05月17日