<p>data-* 属性值必须为字符串，非字符串会自动转为字符串；读取时连字符转驼峰，仅支持小写+连字符命名；不可存敏感或大量数据；框架中不自动响应式，需手动或绑定更新。</p>
data-* 属性的 value 值必须是字符串
HTML 的 data-* 自定义属性不支持直接存对象、数组或布尔值——浏览器会把任何非字符串值（比如 true、null、{id: 1}）自动转成字符串，结果往往不是你想要的。例如：<div data-active=true></div> 读出来是字符串 "true"，但 <div data-count=42></div> 读出来也是字符串 "42"，没法靠类型区分真假。
实操建议：
- 始终用双引号包裹 value，避免空格或特殊字符引发解析错误：
<button data-user-id="123" data-user-role="admin"> - 若需存结构化数据（如 JSON），显式序列化：
<div data-config='{"theme":"dark","timeout":3000}'>（注意单引号外层 + 双引号内层） - JavaScript 中用
JSON.parse()解析前，先检查是否为合法 JSON 字符串，否则会报SyntaxError
JavaScript 读取 data-* 值时注意命名映射规则
DOM API 读取 data- 属性时，连字符（-）会被转成驼峰（camelCase），且忽略前缀 data-。比如 data-user-id → dataset.userId，data-api-url → dataset.apiUrl。
容易踩的坑：
立即学习“前端免费学习笔记（深入）”；
-
dataset只返回字符串，哪怕原始 HTML 写的是data-count="0"，element.dataset.count仍是"0"，不是数字0 - 带大写字母的属性名（如
data-UserID）不会被标准化，dataset.userid读不到，应统一用小写+连字符 - 属性名含数字开头（如
data-1st-item）会导致 JS 无法通过点号访问：dataset.1stItem语法错误，得改用方括号：dataset["1stItem"]
不要用 data-* 存敏感或大量数据
data-* 是为组件交互提供轻量上下文，不是存储层。它会暴露在 HTML 源码里，任何用户都能看到甚至篡改。
典型误用场景：
- 把 token 或用户邮箱塞进
data-token—— 直接泄露 - 把整张表格数据塞进
data-rows—— 渲染变慢、HTML 膨胀、SEO 友好性下降 - 依赖
data-做权限判断（如data-permission="delete"）—— 客户端可随意修改，后端必须重验
替代方案：敏感信息走 API 请求；大量数据用 fetch 按需加载；权限逻辑只在服务端执行。
Vue/React 等框架里 data-* 不会自动响应式
框架模板中写的 data-id="{{ id }}" 或 data-id={id}，只是静态渲染到 DOM 上的一次性字符串。后续 state 改变，dataset.id 不会自动更新，JS 读到的还是初始值。
需要同步更新时：
- 手动调用
element.setAttribute('data-id', newId) - 在 Vue 中用
v-bind绑定：:data-id="id"（Vue 会监听变化并更新 attribute） - React 中用
data-id={id}即可（JSX 会重新渲染并同步 DOM attribute）
但要注意：即使框架帮你更新了 DOM，dataset.id 仍只反映当前值，不会触发自定义事件或自动绑定行为——它始终只是个“快照”。
