data-*属性必须符合html5规范才能被标签识别，dataset读取值全为字符串且不可响应式更新，需用setattribute修改并手动类型转换。
直接在 <a></a> 标签上写 data-* 属性就行，但必须遵守命名规范、类型转换和 DOM 同步规则，否则 JS 读不到或逻辑出错。
data-* 属性怎么写才被 <a></a> 元素识别
浏览器只解析符合 HTML5 规范的 data- 属性，<a></a> 标签也不例外。不合法的写法等于没写，JS 中 dataset 返回 undefined。
-
data-user-id="1001"→ ✅ 正确，JS 可用el.dataset.userId读取 -
data-api-path="/v1/users"→ ✅ 正确，对应el.dataset.apiPath -
data-order-2024="true"→ ✅ 合法，但只能用el.dataset["order2024"]（点号语法不支持数字开头） -
data-userId="1001"、data_user_id="1001"、data-UserID="1001"→ ❌ 全部无效，DOM 中查不到，dataset.userId是undefined
读取时为什么 el.dataset.xxx 总是字符串
dataset 返回的所有值都是字符串，哪怕你写的是 data-count="42" 或 data-active="false"。不做类型转换，逻辑一定翻车。
-
el.dataset.count + 1得到"421"，不是43；应写成+el.dataset.count + 1或Number(el.dataset.count) + 1 -
if (el.dataset.active)在data-active="false"时仍为true（非空字符串转布尔为真）；正确判断是el.dataset.active === "true" - 存布尔/数字/对象时，建议统一用
getAttribute("data-xxx")读取，再手动JSON.parse()或类型转换，避免歧义
修改 data 属性必须用 setAttribute()
el.dataset.xxx = "new" 看似生效，其实只是改了内存里 dataset 对象的副本，不会更新 DOM 属性节点。刷新页面后值就丢了。
- 设置新值：用
el.setAttribute("data-user-id", "1002") - 删除属性：用
el.removeAttribute("data-user-id") - 混用风险：先
dataset.userId = "a"，再setAttribute("data-user-id", "b")，后续dataset.userId仍返回"a"——因为dataset不是响应式代理，只是初始解析的一次性映射
常见误用场景与替代建议
data-* 适合存静态、轻量、非敏感的上下文参数，比如跳转前的 ID、状态标识、简单配置。它不是状态管理器，也不该当 URL query 替代品用。
- 别存 token、密码、用户手机号等敏感信息——源码可见，毫无保密性
- 别存大段 JSON 或嵌套对象——可读性差，解析易错，且影响 HTML 体积
- 需要动态响应式更新时，别依赖
data-*触发重绘——它变更不会触发 CSS 重排或框架响应 - 如果链接参数要参与路由或 API 请求，更稳妥的方式是拼进
href，或用URLSearchParams解析，data-*仅作辅助标识
真正容易被忽略的点是：dataset 的“只读映射”本质和字符串强制性。很多人写了 data-active="false" 却在 JS 里直接 if (el.dataset.active) 判断，结果永远走 true 分支——这不是 bug，是规范使然。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
