dataset读取data属性时属性名自动转驼峰：data-user-id→userid，连字符后字母大写，数字不触发大写；写入值强制转字符串；不响应innerhtml动态修改；仅支持ascii字母、数字、-、.、_且须字母或下划线开头。
dataset读取data属性时，属性名会自动转为驼峰命名
HTML里写 data-user-id="123"，JavaScript中用 element.dataset.userId 读取，不是 element.dataset.userid 或 element.dataset["user-id"]。连字符（-）会被移除，后续字母大写，这是规范强制行为，不支持自定义映射规则。
常见错误：直接按HTML原名访问，比如 dataset["data-user-id"] 或 dataset.user-id（语法报错），结果是 undefined。
-
data-api-url→dataset.apiUrl -
data-is-active→dataset.isActive -
data-xyz-123→dataset.xyz123（数字前的字母大写，数字不触发大写）
写入dataset时，值会被自动转成字符串
element.dataset.count = 42 最终存的是字符串 "42"，不是数字。这和直接操作 setAttribute("data-count", 42) 行为一致，但容易在类型敏感场景下出问题，比如后续用 === 判断或参与数学运算。
如果需要保持原始类型，得自己做转换：读取后用 Number()、JSON.parse() 或布尔判断逻辑处理。
- 布尔值建议用存在性判断：
if ("disabled" in element.dataset)，而不是element.dataset.disabled === "true" - 对象/数组别塞进
dataset，改用JSON.stringify()存、JSON.parse()取，但注意转义和非法JSON风险 - 空字符串
""和"false"都是真值，不能直接当布尔用
dataset不响应HTML字符串的动态修改
如果用 element.innerHTML = "...data-user-id='999'..." 替换整个内容，新插入的 data- 属性**不会立即同步到 dataset 对象**——它只在元素初始化或通过 setAttribute/dataset 写入时更新。
也就是说，dataset 是一个“快照式”的映射，不是实时DOM属性监听器。
- 安全做法：统一用
dataset.xxx = value写，或setAttribute("data-xxx", value) - 避免混合使用：
setAttribute("data-x", "a")后再读dataset.x没问题；但反过来，先写dataset.x = "a"，再用innerHTML覆盖节点，原dataset值就丢失了 - 框架（如React/Vue）中，优先走状态驱动，不要依赖手动读写
dataset做数据源
兼容性与特殊字符限制
dataset 在 IE11+ 和所有现代浏览器都可用，但属性名必须符合规范：只能含 ASCII 字母、数字、连字符（-）、点（.）和下划线（_），且必须以字母或下划线开头。含空格、中文、冒号等会直接被忽略，不报错也不生效。
例如 data-user name="张三" 中的空格导致整个属性被浏览器跳过，dataset.userName 读出来是 undefined。
- 服务端渲染或模板拼接时，务必对 key 做校验和清洗，比如用
key.replace(/[^a-z0-9_-]/gi, "-") - 带点的属性如
data-config.version→dataset.configVersion（点也被转成驼峰） - 纯数字开头不合法：
data-123-id是无效HTML，解析时会被丢弃
dataset 当成可双向绑定的数据源。它本质只是 data- 属性的语法糖，不是响应式状态容器。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
