原生html无状态管理，状态必须由js变量承载；dataset仅适合存瞬态标记，非状态容器；表单同步优先用input事件；form.reset()不维护js数据一致性。
原生 HTML 没有内置状态管理或数据绑定机制，所谓“高效管理”，本质是明确区分「谁该管什么」——DOM 属性只管初始值，dataset 只存视图元数据，真实状态必须由 JS 变量或 useState/store 承载；强行把状态塞进 data- 或依赖 form.reset() 同步，必然导致脱节和调试困难。
什么时候该用 dataset，什么时候绝对不该用
dataset 适合存「只影响当前元素样式或行为、不跨组件、不参与业务逻辑」的瞬态标记，比如 data-expanded="true" 控制折叠动画、data-active="tab-2" 配合 CSS 选择器高亮当前 Tab。它不是状态容器，所有值都是字符串，没有响应式，也不能监听变化。
- ✅ 正确用法：用户点击按钮后，
button.dataset.loading = "true"，CSS 用[data-loading="true"]加载态样式 - ❌ 错误用法：把表单提交后的
user.id存成form.dataset.userId，再在 JS 里读取它发起后续请求——这会让状态散落在 DOM 和 JS 之间，难以追踪来源和生命周期 - ⚠️ 注意：
dataset修改不会触发任何事件，也不会同步到对应 JS 对象属性；若需响应式，必须手动加MutationObserver，得不偿失
input 和 change 事件选哪个来同步表单数据
选 input 是默认策略，除非你明确需要“失焦才确认”的语义（比如防抖搜索、校验时机控制）。change 在移动端容易漏掉最后一次输入（软键盘收起不触发 blur），且对 checkbox / radio 的兼容性不稳定。
- ✅
input：实时捕获每次按键、粘贴、删除，适合密码强度提示、字数统计、搜索建议 - ⚠️
change：仅用于最终确认场景，如切换下拉选项后提交筛选条件；但要注意<input type="range">拖动时change只触发一次，input则高频触发，需防抖 - ❌ 不要用
blur做主同步通道——用户可能直接点提交按钮，跳过失焦
为什么不能靠 form.reset() 维持数据一致性
form.reset() 只恢复 HTML 初始值（即 defaultValue、defaultChecked），和你在 JS 中维护的数据对象完全无关。调用它之后，DOM 值变了，JS 数据还是旧的，立刻产生不一致。
- ✅ 正确做法：封装一个
resetForm(data)函数，既调用form.reset()，又手动把data的每个字段写回对应元素的value/checked - ⚠️ 注意：
<textarea></textarea>的初始内容必须写在标签体内（<textarea>初始文本</textarea>），否则reset()无法还原；动态插入的<option></option>也不会被重置 - ❌ 不要监听
reset事件去“同步 JS 数据”——它不携带新值，只能知道“被点了”，还得自己重新读一遍 DOM
最易被忽略的点是类型混淆：input.value 总是字符串，select.selectedIndex 是数字，checkbox.checked 是布尔值——同一份业务数据映射到不同控件时，必须按控件类型分别处理，不能统一用 setAttribute('value', x)。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
