data-* 属性是显式字符串注入而非隐式传递，浏览器仅存储为字符串，需手动解析、转换类型、监听变化，且命名、读写、安全处理均有严格限制。
data-* 不是隐式传递，而是显式字符串注入
很多人以为写 data-user-id="1024" 就自动“隐式”把结构化数据塞进 DOM 了，其实不是。浏览器只做两件事：解析出这个属性、存为字符串。它不校验格式、不转类型、不建立引用关系——data-config='{"role":"admin"}' 和 data-config="admin" 对 DOM 来说没区别，都是字符串。
所谓“结构化”，得靠你手动 JSON.parse()；所谓“传递”，得靠你主动调用 getAttribute() 或读 dataset.config。没有自动绑定，没有响应式更新，也没有跨组件穿透能力。
- 服务端渲染时，若直接把未转义的 JSON 塞进
data-initial-state，遇到换行或单引号就会让JSON.parse()报错 - React/Vue 组件默认不透传
data-*，<my-button data-track="home"></my-button>在子元素上查不到，除非显式用v-bind="$attrs"或{...props} -
dataset是只读代理，el.dataset.config = '{"a":1}'看似能写，但后续el.innerHTML里看不到更新，也不触发 MutationObserver
命名必须小写+连字符，否则 dataset 读不到
data-userId、data_user_id、data-UserID 全部无效。浏览器解析时会忽略它们，或者当成普通属性（getAttribute() 能取到，但 dataset.userId 返回 undefined）。
正确写法只有：data-user-id → dataset.userId，data-api-endpoint → dataset.apiEndpoint。数字开头的如 data-2024-year 不能用点号访问，得写 dataset["2024Year"]。
- 连字符是硬性分隔符，
data-itemindex（无连字符）会被当作文本节点处理，不进 dataset - 全大写或驼峰命名在 HTML 中合法，但 dataset 映射规则只认小写+连字符组合
- CSS 选择器
[data-status="in-progress"]必须加引号，不加引号时in-progress会被解析成减法表达式
读取后必须手动类型转换，别信隐式判断
dataset.active 永远是字符串 "true" 或 "false"，不是布尔值。所以 if (el.dataset.active) 对 "false" 也返回 true；dataset.count 是 "42"，不是数字 42。
安全转换方式：
- 布尔：
el.dataset.enabled === "true"，不是Boolean(el.dataset.enabled) - 数字：
Number(el.dataset.timeout)或+el.dataset.timeout，避免parseInt("42px")截断风险 - JSON：
JSON.parse(el.dataset.config || "{}")，加兜底防止空值报错 - 数组字符串如
data-tags="a,b,c"：用el.dataset.tags.split(",")，别指望自动解析
监听属性变化必须配 observedAttributes + attributeChangedCallback
想让 data-disabled="true" 改变时触发逻辑？dataset.disabled = "false" 不会触发任何回调。必须走自定义元素生命周期：
-
static get observedAttributes() { return ["disabled"]; }—— 注意不含data-前缀 -
attributeChangedCallback(name, oldValue, newValue)中，name是"disabled"，不是"data-disabled" - 首次初始化也会进这个回调，
oldValue为null，需判空 - 值仍是字符串，转换逻辑必须写在这里，比如
this._disabled = newValue === "true"
原生 HTML 元素不支持监听 data-* 变化，MutationObserver 也只能监听属性变更事件，无法感知 dataset 内存副本更新。
真正容易被忽略的是：dataset 的“同步感”是假象。它只是浏览器对 setAttribute() 的一层便利封装，背后没有状态管理，也没有依赖追踪。把它当配置入口可以，当状态容器就踩坑了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
