data-*属性仅适用于存储静态、轻量、非敏感的上下文信息，不可替代前端状态管理；命名须全小写加连字符，js中通过dataset自动转驼峰读取，写入须用setattribute；存json需手动序列化/解析并注意安全；css选择器值含特殊字符必须加引号；其变更不会触发响应式更新或css重绘。
data-* 属性不能替代前端状态管理，它只适合存静态、轻量、非敏感的上下文信息；当成 React/Vue 的 state 用，或存 token、大段 JSON、用户偏好等动态数据，会立刻暴露安全风险或引发 DOM 同步错乱。
data-* 属性命名必须严格小写+连字符
浏览器只识别 data-user-id、data-api-endpoint 这类全小写+短横线的写法。data-userId、data_user_id、data-UserID 全部无效——DOM 中查不到，dataset 也取不到，JavaScript 里读出来是 undefined。
常见错误现象：
- 开发者写了
data-productId="123"，却在 JS 里写el.dataset.productId，结果返回undefined - 后端模板拼接时混用了下划线或驼峰，导致前端始终无法读取
正确做法：
- HTML 中一律用
data-product-id - JS 中对应访问
el.dataset.productId（自动转驼峰） - 写入必须用
el.setAttribute('data-product-id', '456')，不能直接赋值el.dataset.productId = '456'（部分老浏览器不支持写入）
dataset 读取 vs getAttribute：什么场景该用哪个
dataset 是语法糖，方便读取且自动处理 kebab-case → camelCase 转换；getAttribute 是底层原生方法，兼容性更好、行为更确定。
使用场景差异：
- 需要兼容 IE11 或旧版 Safari？优先用
getAttribute('data-user-id')，dataset在 IE10+ 才稳定 - 属性名含数字开头（如
data-2024-year）？dataset无法访问（el.dataset.2024Year语法错误），只能用getAttribute - 要判断属性是否存在但值为空字符串？
getAttribute返回""或null，而dataset.xxx对空值也返回undefined，语义不同
data-* 存 JSON 字符串的坑
可以存，但必须手动序列化/解析，且极易出错。
典型错误：
- 直接写
data-config="{"theme":"dark"}"，没做 HTML 实体转义，引号冲突导致解析失败 - JS 里没用
JSON.parse()就当对象用，报TypeError: Cannot read property 'theme' of string - 把复杂对象塞进去（如含函数、Date、undefined），序列化后丢失关键信息
安全做法：
- 服务端渲染时用
JSON.stringify()+ HTML 编码（如"替换双引号） - 前端读取后立即
try/catch包裹JSON.parse() - 超过 2–3 个字段就该考虑用真实状态管理，而不是堆 data-*
CSS 里用 data-* 选择器必须加引号
像 [data-status="active"] 这样的写法没问题，但一旦值含空格、斜杠、点号等，不加引号就会失效。
例如：
-
data-date-of-birth="1990-01-01"→[data-date-of-birth="1990-01-01"]✅ -
data-path="/api/v2/users"→ 必须写成[data-path="/api/v2/users"]，写成[data-path=/api/v2/users]❌（CSS 解析器报错） -
data-class-name="btn-primary"→[data-class-name="btn-primary"]✅，漏引号会被当成多个属性组合
另外注意：data- 属性变更不会触发 CSS 重绘，改了 setAttribute 后样式不会自动更新，得靠 class 切换或强制重排。
真正容易被忽略的是响应式更新问题：data-* 是静态快照，不是响应式绑定。改了它，Vue 的 v-bind:data-id 或 React 的 data-id={id} 会同步，但纯 HTML + dataset 不会——你得自己监听、自己 diff、自己更新视图，这时候它已经不是“简化”，而是给自己埋雷了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
