浏览器自动填充绕过事件流导致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 场景）：
立即学习“前端免费学习笔记（深入）”；
<input{...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+）：
<inputv-model="form.email"
@autofill="onAutofill"
/>
const onAutofill = (e) => {
form.email = e.target.value;
};
通用兜底策略：延迟检测 + 强制同步
当上述方案受限（如低版本浏览器、特殊填充场景），可用轻量轮询作为 fallback：
- 在
useEffect/onMounted中启动一个 100ms 间隔的定时器； - 检查 input 的
value是否与当前 state 不一致； - 若不一致，立即同步并清除定时器；
- 注意只对已聚焦或即将提交的表单启用，避免性能浪费。
