data-* 属性是公开的 DOM 属性，非私有变量；它是 HTML5 预留的自定义元数据容器，仅用于存储与渲染无关的轻量级字符串状态信息，如 data-track-id="123"。
data-\* 属性根本不是私有变量，别被名字骗了
直接说结论：data-* 属性是公开的 DOM 属性，任何 JS、CSS 甚至 DevTools 都能读写，完全不具备“私有”语义。它只是 HTML5 规范里为开发者预留的自定义元数据容器，用途是存**与渲染无关但需关联到元素的轻量级状态信息**，比如 data-track-id="123" 或 data-loaded="true"。
如果你真想模拟私有变量（比如避免外部意外覆盖、隐藏实现细节），data-* 不是解法——它连基本的访问控制都没有。
什么时候该用 data-\*，什么时候不该用
适用场景很明确：需要把简单值（字符串、数字、布尔）和某个 DOM 元素做**弱绑定**，且不介意它暴露在 HTML 中。
- 服务端渲染后，前端 JS 读取初始配置：
data-initial-count="5" - 事件委托时快速识别目标类型：
data-action="delete" - 测试时供 Cypress/Playwright 定位：
data-testid="submit-button"
不该用的典型情况：
- 存敏感数据（token、用户 ID）——
data-token会被所有人看到 - 存大对象或函数——
data-只接受字符串，序列化/反序列化开销大且易出错 - 替代组件内部状态——React/Vue/Svelte 的 state 或 ref 才是正途
想“假装私有”？data-\* + Symbol 或 WeakMap 是更靠谱的组合
如果非要在 DOM 元素上挂点“不想被随手改”的东西，data-* 本身做不到，但可以配合 JS 原生机制：
方案一：用 Symbol 作属性键（仅限 JS 内部访问）
const privateData = Symbol('privateData');
element[privateData] = { count: 0, lastUpdated: Date.now() };
// 外部无法通过 element.privateData 或 element['privateData'] 访问
// 除非你把 symbol 变量泄露出去
方案二：用 WeakMap 做真正的弱引用绑定（推荐）
const elementStore = new WeakMap();
elementStore.set(element, { count: 0, isLocked: false });
// 即使 element 被移除，也不会内存泄漏
// 外部没有引用就完全不可达
注意：data-* 在这里只起辅助作用，比如用于初始化：data-init-count="3" → JS 读取后存进 WeakMap，后续操作全走 Map，不再碰 DOM 属性。
data-\* 的实际限制和坑
别小看这个看似简单的机制，踩过才知道：
-
dataset自动转驼峰：HTML 里写data-user-id，JS 里得用element.dataset.userId，写成dataset.userid就是undefined - 值永远是字符串：哪怕你写
data-count="42"，dataset.count拿到的是"42"，不是数字 - 不能存对象/数组：JSON.stringify 后塞进去？可以，但每次读都要
JSON.parse，容易抛错，且没类型保障 - 性能无优势：频繁读写
dataset和直接操作getAttribute/setAttribute差不多，别指望它更快
真正要藏东西，别绕路——用闭包、#privateField（ES2022）、WeakMap 或框架自己的响应式系统。DOM 上的 data-*，就老老实实当个标签用。
