data-*属性仅支持字符串存储，无法直接传递复杂对象；读取时需手动json.parse，命名须全小写加连字符，写入不自动同步dom，且值非响应式。
不能直接用 data-* 属性传递复杂业务对象——它只存字符串，不解析 JSON，不自动转类型，也不响应变化。
data-* 属性读出来永远是字符串
即使你在 HTML 里写 data-user='{"id":1024,"name":"Alice"}'，JavaScript 中 element.dataset.user 拿到的仍是原始字符串，不是对象。直接访问 dataset.user.id 会报 Cannot read property 'id' of undefined。
- 必须手动
JSON.parse(element.dataset.user)，且要加try/catch防止非法 JSON 崩溃 - 数字、布尔、
null、Date等全被序列化成字符串，还原需额外逻辑（比如parseInt(dataset.count, 10)） -
dataset.isActive返回"true"或"false"字符串，不是布尔值；判断时别写if (dataset.isActive)，应写dataset.isActive === "true"
命名不合规会导致 dataset 读不到
浏览器只识别严格符合规范的 data-* 属性：前缀后必须全小写 + 连字符，不能有大写字母、下划线或数字开头（除非用方括号访问）。
- ❌
data-userId、data_user_id、data-API-Key—— 浏览器直接忽略，dataset.userId永远是undefined - ✅
data-user-id→dataset.userId - ✅
data-api-endpoint→dataset.apiEndpoint - ✅
data-2024-config→ 必须用dataset["2024Config"]，点号语法无效
写入 dataset 不等于更新 DOM 属性节点
element.dataset.xxx = "val" 看似生效，但只是改了 JS 内存里的代理对象，不会同步写回 DOM 属性本身。刷新页面或重新渲染后，原始 HTML 中的值不变。
- 真正持久化写入，必须用
element.setAttribute("data-xxx", "val") - 删除属性要用
element.removeAttribute("data-xxx")，而不是dataset.xxx = null或"" - 混用
dataset和setAttribute易导致不一致：先设dataset.foo="a"，再setAttribute("data-foo","b")，后续dataset.foo还是"a"
复杂对象该存在哪，而不是 data-*
如果业务对象需要更新、联动、跨组件或带行为（比如权限变更触发 UI 刷新），data-* 就不该出现。它只适合一次性初始化场景。
- 跨页面传数据？走
URLSearchParams或sessionStorage（注意 Safari 私密模式兜底） - 同页面多组件共享？用 Context、Pinia、Zustand 等状态管理，别靠 DOM 属性“广播”
- 弹窗/iframe 协作？用
postMessage+event.origin校验 - 真要塞对象进 DOM？只限轻量、静态、只读配置，且必须
JSON.stringify()后插入，接收端立即JSON.parse()并校验结构
最常被忽略的一点：dataset 的值不是响应式的，改了它，视图不会重绘，监听器不会触发，连 MutationObserver 都捕获不到变化——它就是个快照，不是管道。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
