data属性必须以data-开头才能被浏览器识别；连字符自动转驼峰命名，dataset读取值恒为字符串，data-src常用于懒加载但需避免与src混用，不适合存大量数据或敏感信息。
data属性必须以 data- 开头才能被浏览器识别
HTML 规范强制要求自定义 data- 属性名必须以 data- 为前缀，否则不会出现在元素的 dataset 对象中，也拿不到 DOM API 支持。比如 data-src、data-id 合法；srcset 或 myid 不算 data 属性，哪怕你写在 <img> 标签里也不会进 dataset。
浏览器会自动把连字符转成驼峰命名：
data-user-id → dataset.userIddata-alt-text → dataset.altText
用 dataset 读取图片的 data 属性最方便
JS 中通过 element.dataset 访问比 getAttribute() 更直观，尤其适合批量读取多个 data 值：
@@##@@
对应 JS：
-
img.dataset.id→"123" -
img.dataset.category→"pet" -
img.dataset.loaded→"false"（注意：始终是字符串，不是布尔值）
如果要转成布尔类型，得手动判断：img.dataset.loaded === "true"，不能直接用 Boolean(img.dataset.loaded)，因为非空字符串都为 true。
data-src 常用于懒加载，但别和 src 混用出错
很多懒加载方案用 data-src 存真实地址，初始时 src 留空或设为占位图：
@@##@@
这时候要注意：
- 不要同时删掉
src又没设data-src，否则图片不显示且控制台报 404 - 替换逻辑要等图片进入视口后才执行：
img.src = img.dataset.src，再删掉dataset.src避免重复触发 -
data-srcset和data-sizes也得同步处理，否则响应式失效
data 属性不适合存大量数据或敏感信息
它本质是 HTML 字符串属性，有明显限制：
- 无法存对象/数组，JSON 字符串得手动
JSON.parse()，容易抛错 - 所有内容对用户可见（查看源码或开发者工具就能看到），绝不能放 token、密钥、用户 ID 明文
- 过长的
data-值会拖慢 HTML 解析，影响首屏性能，建议单个不超过 2KB - 服务端渲染时若动态注入 data 值，注意 XSS 风险，需做 HTML 实体转义
真正需要结构化数据时，优先考虑 <script type="application/json"></script> 块，而不是堆满 data 属性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
