html data-属性值恒为字符串，dataset读取不自动类型转换，需手动解析；驼峰化映射有约束，数字/下划线开头需用getattribute；结构化数据须json序列化并try/catch；dataset赋值不可靠，应统一用setattribute。
HTML data- 属性的值永远是字符串，JavaScript 不会自动转换类型；直接比较或运算会导致隐式拼接、错误布尔判断或字符串字典序比较——这是绝大多数人踩坑的根源。
dataset 读取时所有值都是字符串，连数字和布尔也不例外
哪怕你在 HTML 中写 <div data-count="42" data-active="false"></div>，用 element.dataset.count 拿到的是字符串 "42"，element.dataset.active 是字符串 "false"，不是数字 42 或布尔 false。
常见错误现象：
-
element.dataset.count + 1得到"421"（字符串拼接） -
element.dataset.active === true永远为false（字符串不等于布尔） -
if (element.dataset.active)在data-active="false"时仍进入分支（非空字符串是 truthy）
正确做法：
- 数值转换：用
+element.dataset.count或Number(element.dataset.count)，避免parseInt("42px", 10)这类不安全截断 - 布尔判断：用
element.dataset.active === "true"，而不是!!element.dataset.active或Boolean(element.dataset.active) - 存在性检查：用
'active' in element.dataset判断属性是否存在，而非element.dataset.active != null
dataset 自动驼峰化命名，但不支持数字/下划线开头
HTML 中的 data-user-id 对应 JS 中的 element.dataset.userId，data-api-url → element.dataset.apiUrl。这不是可选行为，是规范强制转换。
容易踩的坑：
-
element.dataset.user-id语法错误（减号不能作点号访问） -
element.dataset['user-id']返回undefined（必须用驼峰名） -
data-2024-id无法映射到dataset.2024Id（JS 属性名不能以数字开头） -
data-user_name不会被识别（下划线不触发驼峰转换）
遇到含数字或下划线的属性名，必须退回到 getAttribute()：
- 读取：
element.getAttribute('data-2024-id') - 写入：
element.setAttribute('data-2024-id', 'abc')（dataset写入对此类名字无效）
结构化数据必须手动 JSON 序列化，且要加 try/catch
不要把对象直接塞进 data- 属性：element.dataset.config = { theme: 'dark' } 实际存的是 "[object Object]"。
正确流程：
- 存入前序列化：
element.setAttribute('data-config', JSON.stringify({ theme: 'dark', timeout: 5000 })) - 读取后解析：
const raw = element.getAttribute('data-config'); const config = raw ? JSON.parse(raw) : {}; - 必须加
try/catch：用户可能手动改 DOM、服务端模板渲染出非法 JSON，不捕获会直接中断 JS 执行
注意：dataset.config 读出来仍是字符串，JSON.parse(element.dataset.config) 和上面等价，但推荐统一用 getAttribute() 避免混淆。
dataset 是只读代理，修改它不保证同步到 DOM
element.dataset.foo = "bar" 看似成功，但它只是给 DOMStringMap 代理对象设属性，现代浏览器通常会同步更新 DOM，但该行为不可依赖。页面刷新后，未通过 setAttribute() 写入的值就丢失了。
真正可靠的做法：
- 写入一律用
element.setAttribute('data-foo', 'bar') - 读取可用
element.dataset.foo（它会立刻反映setAttribute的结果） - 避免混用：不要先
dataset.foo = 'a'，再innerHTML = ''—— 后者会清空所有属性，包括之前没同步的dataset修改
最隐蔽的问题是：自定义元素中监听 attributeChangedCallback 时，observedAttributes 必须写 ['foo']（去掉 data-），而不是 ['data-foo']；否则变更根本不会触发回调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
