dataset读取data属性时自动转驼峰命名，如data-user-id→userid；所有值强制转字符串，对象需json.stringify()存、json.parse()取；不响应innerhtml动态修改，仅初始化或setattribute时更新。
直接用 dataset 存取即可，但必须注意：HTML 里写 data- 连字符命名，JS 里读写用驼峰；所有值都是字符串，对象要自己 JSON.stringify() 和 JSON.parse()；别在 innerHTML 动态插入后指望 dataset 自动更新。
HTML 中 data-* 属性怎么写才合法
必须全小写、用短横线分隔、至少含一个短横线，且不能以数字开头。比如 data-user-id、data-config-json 是对的；dataUserId、data-123id、data-user_id 都会被浏览器忽略——不报错，也不进 dataset。
-
data-product-sku="ABC-123"→ JS 中可读为el.dataset.productSku -
data-api-endpoint="https://api.example.com/v1"→ 对应el.dataset.apiEndpoint - 含点号或下划线如
data-version-2.1会解析失败，应改用data-version-21或data-version-two-one
dataset 读写时类型怎么处理
无论你存的是数字、布尔还是对象，dataset 只收字符串。写入 el.dataset.count = 42，实际存的是 "42"；写 el.dataset.active = true，得到的是 "true"。读出来后得手动转。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 数字：用
Number(el.dataset.count)或一元加号+el.dataset.count - 布尔：别用
=== "true"，优先判断存在性，如"disabled" in el.dataset；若需语义布尔值，建议统一约定字段名（如data-is-hidden），再做el.dataset.isHidden === "true" - 对象/数组：必须序列化，
el.dataset.config = JSON.stringify({ theme: "dark", lang: "zh" })；读取时加空值判断：const raw = el.dataset.config; const config = raw ? JSON.parse(raw) : {};
为什么 dataset 修改后 HTML 源码没变，或者刷新就丢了
因为 dataset 是只读代理（DOMStringMap），不是双向绑定。执行 el.dataset.foo = "bar" 看似成功，其实只是给代理对象设了属性，不会触发 DOM 更新——除非浏览器内部同步机制生效（现代浏览器一般会同步，但不可依赖）；而页面刷新后，DOM 重载，代理映射重置，未通过 setAttribute 写入的值就没了。
- 要确保持久化，写入时用
el.setAttribute("data-foo", "bar") - 读取仍可用
el.dataset.foo，它会立刻反映setAttribute的结果 - 避免混用：不要先
dataset.foo = "a"，再innerHTML = "..."，后者会清空所有 dataset 映射 - 高频操作（如循环渲染）中，先缓存
el.dataset值，批量处理完再统一setAttribute
在编辑器类场景中怎么安全携带结构化元数据
编辑器常需为每个区块存配置、权限、版本等上下文信息。直接把大对象塞进 data- 不现实，也违反语义。推荐分层处理：
- 核心标识类字段（ID、type、order）用原生
data-，如data-block-id="b_001"、data-block-type="heading" - 结构化配置（如 toolbar 设置、schema 规则）走
JSON.stringify()存到单一字段，如data-block-config='{"toolbar":["bold","italic"],"maxLines":3}' - 敏感字段（token、密钥）绝对不用
data-，哪怕加密过——它暴露在 DOM 中，XSS 一击即破 - 动态状态（选中、折叠、编辑中）别放
dataset，该走 JS state 或 class 控制
最易被忽略的一点：dataset 不监听 innerHTML 变更，也不响应服务端模板注入的 data 属性——只有初始化时解析一次，后续靠 JS 主动写入才可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
