data-*属性仅是静态字符串容器，不支持自动数据绑定；所有类型转换、变更监听与dom同步均需javascript手动实现。
data属性本身不支持数据绑定，它只是静态存储
HTML data- 属性是纯字符串容器，浏览器不会自动监听、解析或响应它的变化。你写 <div data-id="123">，它就只是个字符串；哪怕后续用 JavaScript 改了 <code>element.dataset.id = "456"，也不会触发 DOM 更新或模板重渲染——它不是 Vue 的 v-bind，也不是 React 的 props。
常见误解是以为加个 data-items='[{"name":"a"},{"name":"b"}]' 就能“绑定列表”，实际只会存一个 JSON 字符串，需要手动 JSON.parse()，且后续数组变了，data-items 不会自动同步。
想用 data 属性“携带”列表数据，必须手动解析和更新
适用场景：服务端渲染初始数据、低交互静态卡片、SEO 友好型列表（如商品列表 HTML 已含数据，JS 仅增强）。
- 服务端输出时，把列表序列化为 JSON 字符串，写入
data-items： - 前端 JS 获取后必须显式解析：
const el = document.getElementById('product-list');<br>const items = JSON.parse(el.dataset.items || '[]'); - 若后续要更新列表，不能只改 JS 数组，还得反向同步回
dataset（否则下次读还是旧值）：items.push({id: 3, title: 'S24'});<br>el.dataset.items = JSON.stringify(items); - 注意：JSON 中不能含未转义的单引号、换行或控制字符，否则
JSON.parse()报错SyntaxError: Unexpected token
和真实数据绑定方案的关键区别
对比现代框架行为，能看清 data- 的定位：
-
data-是只读“快照”：初始渲染时有值，之后与 JS 内存中的数组完全脱钩 - 没有响应式：修改
dataset.xxx不会触发事件，也不影响视图（除非你额外写监听逻辑） - 性能无负担：适合大量静态数据，避免框架 diff 开销；但交互频繁时，手写增删 DOM + 同步 dataset 极易出错
- 兼容性极好：所有浏览器都支持，但
dataset对连字符命名有转换规则（如data-user-id→dataset.userId）
真要实现动态列表绑定，data 属性只能当“启动参数”
它最合理的角色是传递初始化配置，而非运行时数据源。例如：
- 指定 API 路径：
<div data-api-endpoint="/api/posts?limit=10">，然后 JS 用它发起请求 <li>标记渲染模式：<code><div data-render-mode="client-side">，决定走 JS 渲染还是保留服务端 HTML <li>传入唯一标识供 JS 关联：<code><div data-list-id="recent-posts">，再由 JS 从全局缓存或 store 中取对应列表 <p>硬要用 <code>data-存整个列表并维持绑定，等于自己重造一个微型响应式系统——解析、diff、DOM patch、错误恢复，成本远高于直接用Array.map()生成 HTML 或接入轻量库如 Alpine.js。最容易被忽略的一点：
dataset值永远是字符串，哪怕你设el.dataset.count = 42，取出来也是"42"；列表类数据一旦嵌套稍深，手动 parse/stringify 的边界情况（null、undefined、Date、RegExp）很快失控。
