data-*属性仅存字符串型元数据，需json.parse()转义使用，命名须小写连字符，赋值须setattribute，不可替代状态管理。
HTML data-* 属性不是“保存标签信息”的通用容器，它只适合存轻量、静态、与该元素强绑定的元数据；想存标签列表、分类、关键词这类语义化结构，必须先转成字符串（如 JSON），且不能依赖浏览器自动解析。
data-* 属性只能存字符串，别当对象或数组用
你写 <div data-tags='["vue", "react", "svelte"]'>，浏览器实际只存下这个字符串，<code>dataset.tags 读出来是字面量 "["vue", "react", "svelte"]"，不是数组。直接遍历会报错。
- 错误示范：
el.dataset.tags.forEach(...)→ TypeError: forEach is not a function - 正确做法：先
JSON.parse(el.dataset.tags || "[]")，且必须加try/catch防止服务端渲染出错或字段为空 - 服务端输出带单引号、未转义引号、或含
undefined/function的 JSON，JSON.parse()会直接崩溃 - 如果只是简单逗号分隔（如
data-tags="vue,react,svelte"），可用el.getAttribute("data-tags").split(",")，但无法处理带逗号的标签名（比如"C++, TypeScript"）
命名必须全小写+连字符，驼峰和下划线都不认
浏览器只识别 data-tags、data-post-id 这类命名。写成 data-tagsList、data_tags 或 data-Tags，属性会被忽略，getAttribute("data-tagsList") 返回 null，dataset.tagslist 是 undefined。
- 合法：
data-article-tags→ 可用dataset.articleTags或getAttribute("data-article-tags") - 非法：
data-tags-list（连字符太多？不，它合法）→ 实际问题常出在data-1st-tag（数字开头）、data-API-Key（大写） - 含数字开头的命名（如
data-2024-topic）无法通过点号访问：dataset.2024Topic语法错误，必须用dataset["2024Topic"]或更稳的getAttribute("data-2024-topic")
dataset 赋值不更新 DOM，改值必须用 setAttribute
你执行 el.dataset.tags = JSON.stringify(["nextjs", "tailwind"]) ，看起来生效了，但 el.getAttribute("data-tags") 仍返回旧值——因为 dataset 是只读代理，赋值只是临时映射，不写入真实 DOM 属性。
- 要让其他 JS 模块或 CSS 选择器（如
[data-tags]）感知变化，必须调用：el.setAttribute("data-tags", JSON.stringify(newTags)) - 删除属性也不能
delete el.dataset.tags，那没效果；得用el.removeAttribute("data-tags") - 批量更新多个 data 属性时，避免循环多次
setAttribute，可先拼好对象，再用Object.entries(dataObj).forEach(([k, v]) => el.setAttribute(`data-${k}`, v))
别用 data-* 替代状态管理或持久化存储
data-* 值只存在于当前 DOM 树中，页面刷新后虽然 HTML 源码还在，但 JS 修改过的值不会回写到源码里；它也不参与任何跨组件通信或响应式更新。
- 适合场景：服务端预置的初始标签（如 CMS 输出的
<article data-tags='["blog", "webdev"]'></article>），前端仅读取、不频繁修改 - 不适合场景：用户点击打标签、实时搜索过滤、多 Tab 同步标签状态——这些该用
localStorage、URL 参数或状态管理库 - CSS 里想根据标签做样式区分（比如
[data-tags~="react"] { color: #61dafb; }），注意~=` 是空格分隔匹配，不是 JSON 数组匹配；所以得确保存的是空格分隔字符串，而非 JSON
最易被忽略的一点：data-* 是“一次性快照”，不是活的数据管道。哪怕你用 MutationObserver 监听属性变化，也得自己实现反序列化逻辑，而且无法还原原始数据类型。真要动态维护标签集合，优先考虑构建一个独立的 Map 或 WeakMap 关联 DOM 元素和标签数组，把 data-* 当作降级 fallback 或 SSR 初始值即可。
