浏览器自动填充绕过事件流导致react/vue受控组件状态不同步；react可用onanimationstart捕获填充并手动同步，vue 3.4+支持原生@autofill事件，低版本可降级用动画监听或轻量轮询兜底。

这个问题很常见：浏览器自动填充（比如密码管理器填用户名/密码，或地址栏下拉选历史记录）后，React 或 Vue 的受控组件看似显示了值，但内部状态没更新，导致提交时字段为空、校验失败、watch 无反应——本质是框架没“感知”到这次值变化。

根本原因：自动填充绕过了框架的事件流

React 和 Vue 的受控组件依赖 用户交互触发的事件（如 input、change）来同步 state。而浏览器自动填充：

• 直接修改 DOM 的 value 属性，不触发原生 input 或 change 事件；
• 不调用组件的 onChange / @input 处理函数；
• 导致视图（DOM）和状态（state / ref）出现“视觉一致但逻辑脱节”的假象。

React 中的可靠解法：监听 animationstart + 手动同步

Chrome、Edge、Safari 等主流浏览器在自动填充发生时，会为被填充的输入框触发一个短暂的 CSS 动画（即使没定义动画），可借此捕获时机：

• 给 input 添加 onAnimationStart 回调；
• 在回调中读取当前 element.value，并用 setValue（React Hook Form）或 setState（原生 useState）更新状态；
• 兼容性好，无需轮询，也不依赖私有 API。

示例（RHF 场景）：

Dagre React Flow

使用 dagre 与 React Flow (@xyflow/react) 实现自动图布局。适用于自动布局、层级布局、树形结构或节点排列等场景。

下载

  {...register('email')}
  onAnimationStart={(e) => {
    if (e.animationName === 'on-auto-fill-start') {
      setValue('email', e.currentTarget.value);
    }
  }}
/>

Vue 中的对应方案：使用 autofill 事件（Vue 3.4+）

Vue 3.4 起原生支持 @autofill 事件（基于 Chrome 的 autofill 事件规范）：

• 直接监听 @autofill，比轮询或 hack 动画更语义化、更轻量；
• 事件对象包含已填充字段名和值，适合多字段表单；
• 旧版 Vue 可降级使用 onAnimationStart 同 React 方案。

示例（Vue 3.4+）：

  v-model="form.email"
  @autofill="onAutofill"
/>

const onAutofill = (e) => {
  form.email = e.target.value;
};

通用兜底策略：延迟检测 + 强制同步

当上述方案受限（如低版本浏览器、特殊填充场景），可用轻量轮询作为 fallback：

• 在 useEffect / onMounted 中启动一个 100ms 间隔的定时器；
• 检查 input 的 value 是否与当前 state 不一致；
• 若不一致，立即同步并清除定时器；
• 注意只对已聚焦或即将提交的表单启用，避免性能浪费。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！