data-* 属性仅适合存储序列化后不变的配置或标识，不能替代私有状态管理；应配合 weakmap 实现真私有状态，data-id 仅作唯一键或 ssr 桥接用途。
data-* 属性不是状态容器，别把它当 Map 用
直接说结论：data-* 属性只适合存**序列化后不变的配置或标识**，不能替代真正的私有状态管理。它本质是字符串属性，所有写入值都会被强制转成字符串，JSON.stringify({a: 1}) 和 {a: 1} 写进去效果一样，读出来全是字符串——你没法靠它存函数、DOM 引用、Symbol 或闭包变量。
常见错误是这样写：
element.dataset.counter = () => count++;
结果 element.dataset.counter 变成 "() => count++" 字符串，根本不是函数。
- 能安全存：数字 ID、布尔标志（
true→"true"）、简短 JSON 片段（{"id":42}） - 不能存：对象引用、事件监听器、Promise 实例、Date 对象
- 读取时必须手动
JSON.parse()或类型转换，且要处理undefined和解析失败
用 WeakMap 配合 data-id 实现真私有状态
真正可靠的私有状态方案是：用 data-id 做唯一键，WeakMap 存状态对象。这样既不污染 DOM，又自动随元素回收内存。
示例：
const elementState = new WeakMap();<br><br>function initElement(el) {<br> if (!el.dataset.id) {<br> el.dataset.id = Math.random().toString(36).slice(2, 9);<br> }<br> elementState.set(el, {<br> count: 0,<br> lastClick: null,<br> handler: () => el.click()<br> });<br>}<br><br>function getCount(el) {<br> return elementState.get(el)?.count || 0;<br>}
-
WeakMap键必须是对象（el），不能是字符串，所以不能用data-id直接当 Map 键 -
data-id仅用于调试或服务端渲染时还原状态，运行时不用查它 - 避免用全局
Map，否则元素被移除后状态泄漏
什么时候必须用 data-* 传参，而不是状态？
典型场景是 SSR 渲染后，JS 初始化时需要读取服务端注入的上下文，比如分页组件的当前页码、表单默认值、开关初始状态。
这时 data- 是最轻量、最兼容的“桥接”方式：
<button data-page="3" data-mode="dark">Load</button>
JS 初始化逻辑：
document.querySelectorAll('[data-page]').forEach(el => {<br> const page = parseInt(el.dataset.page, 10);<br> const mode = el.dataset.mode;<br> // 启动逻辑…<br>});
-
dataset自动把data-page映射为page，但驼峰命名会变成小写连字符（data-user-id→dataset.userId） - 不要在运行时频繁读写
dataset来驱动 UI，性能差（触发 layout）且不可靠 - 服务端生成的
data-值应尽量简单，避免嵌套 JSON（可读性差、易 XSS）
避开 dataset 的坑：大小写、空格、保留字
dataset API 有隐式转换规则，容易误判：
-
data-foo-bar→dataset.fooBar，但data-FOO-BAR也变成dataset.fooBar（全小写归一化） -
data-123abc合法，但dataset.123abc是语法错误，得用dataset["123abc"] -
data-for、data-class这类与 HTML 原生属性同名的，会被忽略或覆盖（dataset.for返回undefined） - 值含空格或引号时，HTML 解析可能出错，建议 URL 编码或用
setAttribute('data-xxx', value)替代dataset.xxx = value
最稳的方式是统一用 getAttribute('data-xxx') 和 setAttribute('data-xxx', value)，绕过 dataset 的自动映射逻辑。
复杂状态管理终究绕不开设计权衡：DOM 上只放锚点，状态存在内存里，data- 是信使，不是仓库。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
