data属性需通过模板引擎渲染或js的dataset/setattribute动态添加，原生html不支持js表达式；vue中须用:attr绑定，react中data-id={item.id}合法但null/undefined会被忽略。
data属性在for循环里怎么动态加
HTML data- 属性必须用字符串字面量或拼接方式写进标签里，不能直接在 HTML 中运行 JS 表达式。所以你在模板里写 <div data-id="{{ item.id }}"> 这类语法，本质依赖的是模板引擎（比如 Vue、React、Django、Jinja2）的渲染能力，不是原生 HTML 支持的。<p>原生 JS 循环生成元素时，得用 <code>dataset 或 setAttribute 手动挂载：
-
element.dataset.xxx = value：自动把xxx转成data-xxx，且会做类型转换（比如数字转字符串，null变空字符串） -
element.setAttribute('data-xxx', value)：更底层，完全按你传的值设字符串，不处理类型 - 注意：
dataset不支持短横线命名的 key，比如data-user-id得写成element.dataset.userId（驼峰化）
Vue/React 里 data-* 绑定常见翻车点
框架里看似简单，但容易漏掉引号或绑定方式不对，导致属性没生效：
- Vue 模板中写
:data-id="item.id"是错的——:是v-bind:缩写，但data-不是 Vue 的响应式 prop，不会被解析为属性；正确写法是:attr="{ 'data-id': item.id }"（Vue 3）或v-bind="{ 'data-id': item.id }"（Vue 2） - React 中直接写
data-id={item.id}是合法的，但注意如果item.id是undefined或null，React 会忽略该属性（不渲染），而不是设成空字符串 - 如果用
dangerouslySetInnerHTML拼 HTML 字符串，data-会被当普通文本，无法被 JS 读取（dataset为空）
用 dataset 读取时为什么拿不到值
最常遇到的是 DOM 元素还没挂载，或者属性名映射错了：
- 元素必须已插入文档（或至少被
document.createElement创建后手动 set），否则dataset是空对象 -
data-user-id→ 对应element.dataset.userId，不是element.dataset.userid或element.dataset['user-id'] -
dataset只返回字符串，哪怕你设的是数字123，读出来也是"123"；要转类型得自己parseInt()或JSON.parse() - 服务端渲染（SSR）+ 客户端 hydrate 时，若前后端
data-值不一致，可能触发 Vue/React 的 hydration mismatch 警告
批量操作 data 属性的性能注意
大量列表项（比如上千条）逐个调用 dataset 或 setAttribute 会触发多次重排，尤其在旧版浏览器中明显卡顿：
- 优先用字符串拼接 +
innerHTML一次性写入（适合静态内容） - 用
DocumentFragment批量创建再 append，避免反复回流 - 如果只是临时存 ID 之类简单数据，考虑用 Map 关联 DOM 元素和数据，比反复读写
dataset更快 - 别在
scroll或input事件里高频更新data-属性——它不是状态容器，是“标记”，频繁改它等于滥用
data 属性设计初衷是让 HTML 自带轻量元信息，不是替代 JS 变量或状态管理。真正需要响应式或复杂逻辑时，该用 Map、WeakMap 或组件 state 就别硬塞 data-*。
