input.value = '' 是最直接、稳定、兼容性最佳的清空方式，适用于所有现代浏览器及移动端 WebView，无需依赖 form 重置或父级元素。
直接用 input.value = '' 最快最稳
不用触发表单重置、不依赖父级 form、兼容所有现代浏览器，包括移动端 WebView。这是最直白也最可控的方式。
常见错误现象：input.value = null 或 input.value = undefined 看似清空了，但实际值变成字符串 "null" 或 "undefined"；input.innerHTML = '' 对 input 无效（它不是容器元素）。
-
input.value = ''是唯一推荐的赋值方式 - 如果绑定过
v-model（Vue）或value属性受控，需同步更新对应数据状态，否则下次渲染会“抢回”旧值 - 对
type="number"的输入框，设为空字符串后，input.valueAsNumber会变成NaN，但input.value仍是''—— 这是预期行为，不是 bug
用 form.reset() 时必须小心字段名
它只重置有 name 属性的 input，且只恢复到 HTML 中初始的 value 值（或缺省空值），不是 JS 动态改过的值。
使用场景：表单提交后一键还原全部字段，但前提是所有要重置的字段都带 name，且你接受“回到页面加载时的状态”这个逻辑。
立即学习“前端免费学习笔记（深入）”；
- 没写
name的input不会被form.reset()影响 -
input的初始value是""，但 JS 曾执行过el.value = 'abc'，reset()后仍会变回""—— 它不认 JS 改动 - 如果用了
required或其他校验属性，reset()后校验状态（如:invalid伪类）也会重置
别碰 input.type = 'text' 这种重设类型操作
有人想“先改 type 再改回来”来清空，比如 input.type = 'hidden'; input.type = 'text'，这不仅无效，还会在部分浏览器中抛错或导致焦点丢失、事件监听器被剥离。
性能与兼容性影响：IE11 及更早版本下，修改 type 会完全重建 DOM 节点，绑定的事件、自定义属性全丢；Chrome/Firefox 虽不报错，但属于未定义行为，MDN 明确标注为“不推荐”。
- 绝对不要用
input.setAttribute('type', ...)来清空 - 同理，
input.outerHTML = input.outerHTML是重渲染陷阱，可能触发无谓的 layout thrashing - 真要“强制刷新”，
input.value = ''; input.dispatchEvent(new Event('input', { bubbles: true }))才是安全补全
React/Vue 场景下清空要分清“受控”和“非受控”
框架里最常踩的坑：DOM 清空了，状态没同步，或者状态清空了，但 input 没响应 —— 根本原因是混淆了受控（controlled）与非受控（uncontrolled）模式。
使用场景：用户点击「清空」按钮后，既要清输入框，又要清关联 state；若用 ref 直接操作 DOM，而 state 未更新，下一次 render 就会覆盖 DOM 修改。
- React 中：必须同时
setValue('')+ 确保valueprop 更新，否则警告 “A component is changing an uncontrolled input to be controlled” - Vue 中：用
v-model时，直接modelValue = ''即可；若用ref+.value，记得也要同步data或ref的值 - 非受控组件（比如临时用
ref读取、不绑定 state）可以放心用input.value = ''，但之后不能再走受控流程
