data-*属性仅用于存储轻量静态元数据，命名须全小写加连字符，读取用dataset（自动驼峰），写入必须用setattribute()，值均为字符串需手动类型转换，不支持跨刷新持久化。
data-* 属性不是数据库，也不是状态管理器，它只适合存轻量、静态、与 DOM 元素生命周期一致的元数据；真要跨刷新保留或做复杂状态同步，得用 localStorage、IndexedDB 或后端 API。
data-* 属性名必须全小写 + 连字符，否则 dataset 读不到
浏览器对 data-* 属性名有严格解析规则：前缀 data- 后只能跟小写字母、数字或连字符（-），不能有大写、下划线、点号或空格。一旦违规，DOM 根本不认这个属性，dataset 返回 undefined 是常态，不是 JS 写错了。
-
data-user-id→ ✅ 正确，element.dataset.userId可读 -
data-userId或data_user_id→ ❌ 浏览器忽略，dataset.userId永远是undefined -
data-2024-start-date→ ✅ 合法，但必须用element.dataset["2024StartDate"]访问（点号语法不支持数字开头） -
data-foo--bar→ ⚠️ 虽能解析为fooBar，但语义模糊，建议避免
dataset 是只读代理，改值必须用 setAttribute()
element.dataset.xxx = "new" 看似生效，实际只是改了内存里那个临时映射对象，DOM 属性节点完全没变。刷新页面、重渲染、查 el.outerHTML，还是原始值。
- 写入唯一可靠方式：
element.setAttribute('data-xxx', 'value') - 删除必须用：
element.removeAttribute('data-xxx') - 读取推荐用：
element.dataset.xxx（自动驼峰、语义清晰） - 混用会出问题：先
dataset.foo = "a"，再setAttribute('data-foo', 'b')，后续dataset.foo仍返回"a"—— 因为dataset不是双向绑定，只是初始解析的一次性快照
所有值都是字符串，类型转换必须手动做
data-count="42" 读出来是 "42"，不是数字；data-active="false" 是字符串 "false"，Boolean("false") 结果是 true。别指望自动转类型。
- 数字转换：
parseInt(element.dataset.count, 10)或+element.dataset.count - 布尔判断：
element.dataset.active === "true"，而不是!!element.dataset.active - JSON 字符串需显式解析：
JSON.parse(element.dataset.config)（确保内容合法） - 若不确定值是否为空，优先用
getAttribute()直接读原始值，比dataset更可控
适合存什么，不适合存什么
data-* 的本质是 HTML 元素的“附带说明”，不是存储层。它的存在意义在于把语义和行为锚定到具体 DOM 节点上，比如组件类型、调试开关、CSS 钩子。
- ✅ 适合：
data-component="modal"、data-loaded="true"（供 CSS 选择器[data-loaded]使用）、data-api-endpoint="/api/users" - ❌ 不适合：
data-user-list="[{id:1,name:'a'},...]"（太重）、data-last-update-time="1726932600000"（需持久化就该进localStorage） - ⚠️ 容易被忽略的关键点：页面刷新后，你 JS 里改过的
data-*值不会自动写回 HTML 源码——它只活在当前 DOM 树里，关掉标签页就丢
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
