html data-* 属性仅用于挂载初始字符串元数据，不持久化、不响应变更；命名须全小写加连字符，dataset 读取值全为字符串，修改需用 setattribute，判断存在用 hasattribute。
HTML data-* 属性不是“保存”行数据的工具，它只负责在 DOM 元素上挂载初始字符串元数据；页面刷新后，JS 修改过的值不会自动写回 HTML，也不会持久化——真要保存行数据，请用 localStorage、IndexedDB 或后端 API。
data-* 属性名必须全小写+连字符，否则 dataset 读不到
浏览器对 data-* 属性名有硬性校验：只接受小写字母、数字、连字符（-），且必须以 data- 开头、后面至少跟一个字符。任何含大写（如 data-userId）、下划线（data_user_id）、点号或空格的写法，浏览器直接忽略，不报错也不进 DOM。
-
data-user-id="123"→ ✅ 可被dataset.userId和getAttribute('data-user-id')正常读取 -
data-userId="123"→ ❌dataset.userId返回undefined，getAttribute也拿不到（属性压根没被解析） -
data-order-no="A-001"→ ✅ 合法，dataset.orderNo返回"A-001"
dataset 读出来全是字符串，类型转换得自己做
dataset 是只读代理，所有值都强制转成字符串返回，哪怕你写了 data-count="42" 或 data-active="true"，读出来仍是 "42" 和 "true"，不是数字或布尔值。
- 需要数字？手动
parseInt(el.dataset.count, 10)或Number(el.dataset.count) - 需要布尔？不能靠
el.dataset.active === 'true'简单判断，因为data-active没值时dataset.active是空字符串，而data-active="false"仍返回字符串"false" - 需要对象？比如
data-initial-state='{"id":1,"name":"foo"}'，必须用JSON.parse(el.getAttribute('data-initial-state'))，且务必加try/catch
修改 data 属性必须用 setAttribute，dataset 赋值不触发 CSS 选择器重匹配
写 el.dataset.userId = "456" 看似方便，但它只是更新内存映射，DOM 上的 data-user-id 属性值**不会同步变更**，DevTools 里看不到变化，CSS 的 [data-user-id] 选择器也不会重新生效，MutationObserver 也收不到通知。
- 想让 CSS 或其他 JS 感知到变化？必须用
el.setAttribute('data-user-id', '456') - 想删掉属性？用
el.removeAttribute('data-user-id')，而不是delete el.dataset.userId（无效） - jQuery 用户注意：
.data('xxx')和.attr('data-xxx')完全不同源：.data()是独立缓存，首次读取会解析类型（"123"→123），后续只读缓存；改值必须用.attr()才能同步到 DOM
getAttribute('data-xxx') 比 dataset.xxx 更可靠
当命名不规范（含数字、大小写混用）、需原始字符串、或要判断属性是否存在时，getAttribute 是唯一稳的选择。
-
data-api-v2-endpoint→dataset.apiV2Endpoint在部分老浏览器中可能失效，但getAttribute('data-api-v2-endpoint')总是返回原始字符串 -
data-config='{"debug":true}'→ 必须getAttribute+JSON.parse，dataset.config只给字符串 - 判断是否设置了该属性？用
el.hasAttribute('data-disabled')，比el.dataset.disabled !== undefined准确（后者在属性存在但值为空串时也返回undefined）
真正容易被忽略的是：很多人把 data-* 当成轻量级状态容器，但它没有生命周期、不响应变更、不参与框架 diff、也不自带序列化能力——它就是个静态标签，适合存按钮类型、调试开关、CSS 钩子这类一次写入、极少改动的元信息。行数据的增删改查逻辑，该交给 JS 变量、Map 或专门的存储方案来管。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
