input事件无法准确反映中文输入法下用户真实意图，需配合compositionstart/compositionend监听；仅在非组合状态下更新状态，并补充paste、change等事件监听以确保dom与状态同步。
Input 事件在中文输入法下无法反映“用户真实意图”，直接监听会导致状态错乱、光标跳失、候选框中断——这不是 bug，是浏览器对 composition 生命周期的标准实现。
compositionstart/compositionend 必须手动监听
原生 input 事件不区分拼音输入和最终确认，只要 input.value 变了就触发。而输入法组合过程（如敲 “zhong” → 候选 “中”）中，value 会多次变化，但用户还没决定要输什么。
- 漏掉
compositionstart，后续所有input都会被当成“真实输入”，清洗逻辑可能把 “zh” 当成非法字符删掉 -
compositionend是唯一可靠的“用户已确认”信号，此时的input.value才代表一次有效输入 - 不要依赖
compositionupdate：它在部分安卓 WebView 中不可靠，且语义模糊（仅表示候选词刷新，不等于内容变更）
React/Vue 中 useState/useEffect 会放大 IME 问题
框架的响应式更新机制和 DOM 同步节奏，会让输入法状态管理更脆弱。
- 在
input回调里直接调用setState({ value: e.target.value })，会强制 React 重渲染，浏览器判定 DOM 被篡改，立刻终止当前 IME 会话 - 表现就是：刚打完 “shu”，候选框消失、光标跳到开头、输入框变空
- 正确做法是用
useState管理一个isComposing标志位，在compositionstart设为true，compositionend设为false，只在!isComposing时更新 state - 若需实时响应（如搜索建议），防抖必须加在
compositionend之后，而非input事件内
DOM 层级的状态同步不能只靠 event.target.value
用户通过粘贴、自动填充、JS 赋值等方式修改值时，input 事件不会触发，但 input.value 已变 —— 这导致“状态感知”和“真实 DOM”脱节。
- 不要只监听
input+compositionend，还需补充监听paste、change（用于失焦补漏）、以及表单reset后的input事件回补 - 读取当前值始终用
input.value（property），而非input.getAttribute('value')（attribute），后者只反映初始 HTML 值 - 设置初始值推荐用
input.defaultValue = 'xxx'，这样form.reset()才能正确还原
最易被忽略的一点：移动端软键盘收起时，iOS Safari 可能在几十毫秒后才补发一次 input 事件，而 compositionend 早已触发。如果你的业务逻辑严格依赖“最后一次输入即终态”，得在 blur 后加一次兜底校验，而不是只信 compositionend。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
