data属性必须用data-前缀且全小写，浏览器自动标准化命名；dataset读取便捷但值均为字符串，需手动转换类型；设置须用setattribute，不可直接赋值dataset；不适用于敏感信息或大数据量场景。
data属性必须用data-前缀，且不能包含大写字母
浏览器会自动把data-后面的大写字母转成小写并加连字符，比如data-userId会被标准化为data-userid，读取时用dataset.userid而不是dataset.userId。这是最容易踩的坑——命名看着对，实际取不到值。
合法写法示例：data-product-id="123"、data-is-active="true"、data-config='{"theme":"dark"}'
非法写法示例：data-UserID（大写U）、data-itemPrice（驼峰）、data@type（非字母数字和连字符）
用dataset读取比getAttribute更方便，但要注意类型都是字符串
dataset是HTMLElement原生属性，自动把连字符转成驼峰，比如data-api-url → element.dataset.apiUrl。但它只返回字符串，哪怕你写了data-count="42"，dataset.count也是"42"，不是数字。
推荐做法：
- 布尔值用
hasAttribute('data-xxx')判断是否存在，别依赖dataset.xxx === 'true' - 数字用
Number(element.dataset.count)或一元加号+element.dataset.count - JSON字符串用
JSON.parse(element.dataset.config)，但要包try/catch
动态设置data属性要用setAttribute，别直接改dataset
dataset是只读代理，直接赋值如el.dataset.foo = 'bar'不会生效，也不会报错——它只是静默失败。
正确写法只有：el.setAttribute('data-foo', 'bar') 或 el.setAttribute('data-user-id', 456)
补充说明：
- 修改后
dataset会自动更新，无需手动同步 - 如果值含空格或引号，
setAttribute会自动转义，不用自己处理 - 频繁修改多个data属性时，批量用
setAttribute比逐个操作更可靠
data属性不适合传大量数据或敏感信息
它本质是HTML字符串属性，所有内容都暴露在DOM里，能被任意JS读取、被爬虫抓取、被开发者工具看到。不要放token、密码、用户手机号等。
性能方面：单个元素上堆几十个data-属性不会卡，但若在成百上千个列表项里都塞大JSON字符串，会明显拖慢渲染和内存占用。
替代方案参考：
- 传ID或索引，数据存在JS对象或Map里查表
- 敏感参数走AJAX请求头或服务端session
- 需要响应式更新的场景，优先考虑
customElements或框架的响应式状态
data属性真正的价值在于轻量、解耦、可调试——只要别把它当数据库用就行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
