data属性值默认都是字符串，无法自动转类型；需手动用Number()、=== "true"等转换，JSON数据须序列化并try/catch解析，且dataset不参与框架响应式。
data属性值默认都是字符串，无法自动转类型
HTML 的 dataset API 读取 data- 属性时，**所有值都强制转为字符串**，哪怕你写的是 data-count="42" 或 data-active="true"，element.dataset.count 拿到的仍是 "42"，element.dataset.active 是 "true"，不是布尔值。这不是 bug，是规范行为 —— HTML 属性本质就是文本，浏览器不负责推断语义类型。
常见错误现象：if (el.dataset.loading === true) 永远不成立；el.dataset.index + 1 得到 "01" 而非 1。
- 使用场景：需要把
data-id当数字用、data-disabled当布尔判断、data-config解析为对象 - 不要依赖
JSON.parse(el.dataset.config)直接解析未加引号的 JSON 片段（会报错），原始字符串必须是合法 JSON 格式 - 注意大小写转换：HTML 中
data-user-id对应dataset.userId，连字符自动转驼峰
手动转换数字和布尔最安全的方式
对已知类型的字段，显式转换比“猜类型”更可靠。避免用 == 做宽松比较（"0" == false 为真），也别用 Boolean("false")（结果是 true）。
- 数字：优先用
Number()或一元加号+el.dataset.count；parseInt(el.dataset.count, 10)适合带单位的字符串（如"10px"） - 布尔：用
el.dataset.enabled === "true"或el.dataset.disabled !== "false"；若允许空字符串表示 false，可封装为str => str === "true" - 注意
NaN和空字符串：转换前建议先el.dataset.value?.trim()，防止前后空格干扰
复杂结构（如数组、对象）必须用 JSON 编码
HTML 属性不支持嵌套结构，想存对象或数组，**必须序列化为 JSON 字符串**，并在 JS 端反序列化。直接写 data-filters='{"type":"user","limit":5}' 是合法的，但必须确保单引号/双引号配对且内容是有效 JSON。
- 服务端渲染时，用
JSON.stringify()输出（并做 HTML 实体转义，防 XSS） - 前端读取：先取
el.dataset.filters，再JSON.parse()；务必包try/catch，无效 JSON 会抛错 - 错误示例：
data-config="{a: 1}"（键名没引号）→JSON.parse失败；data-config='{"name": "O'Reilly"}'（单引号内含单引号）→ HTML 解析中断
Vue/React 中 data 属性不是响应式数据源
框架不会监听 dataset 变化，data-status="pending" 改成 "done" 不会触发 Vue 的 reactivity 或 React 的 rerender。它只是初始配置的传递通道。
- 正确做法：在组件初始化时读一次
dataset，转成响应式变量（如 Vue 的ref()、React 的useState()） - 不要在模板里直接写
{{ $el.dataset.mode }}期望动态更新 —— DOM 属性变，JS 变量不会自动同步 - 如果需运行时更新，改用事件通信或状态管理，而非反复读
dataset
真正麻烦的不是怎么转，而是得时刻记住：data 属性只是字符串容器，它不承诺类型，也不参与框架生命周期。每次取值前，都要问自己——这串文本我打算当什么用？然后亲手把它变成那个东西。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
