data-属性仅为字符串容器，非绑定机制；需js手动读取转换同步，命名须小写连字符格式，dataset与getattribute行为不同，自定义元素才支持监听变更，状态管理应避免滥用。
HTML data- 属性不是“绑定机制”，它只是字符串容器；所谓“绑定”必须靠 JS 手动读取、转换、同步，否则值永远是字符串，不会自动参与逻辑或更新 UI。
data-* 属性名怎么写才真正生效
浏览器只认一种合法格式：必须以 data- 开头，后面只能跟小写字母、数字、连字符 -、下划线 _ 或冒号 :（冒号有兼容风险，建议避开）。大写字母、点号、空格、中文、纯数字都不行。
-
data-user-id✅ 可读为dataset.userId -
data-UID❌ 不会映射为dataset.uid，得写成data-uid -
data-userId❌dataset.userId读不到，因为不是 kebab-case -
data-123-active❌ 属性名非法，部分浏览器直接忽略 -
data-user_id⚠️ 虽不报错，但dataset.user_id无效，下划线不转驼峰
dataset 和 getAttribute 的关键区别
两者都能读 data- 属性，但行为完全不同，混用容易踩坑：
-
dataset.userId→ 自动把data-user-id转驼峰，值恒为字符串，不支持数字开头的 key（如data-2024-id得用dataset["2024Id"]） -
getAttribute("data-user-id")→ 原样返回字符串，大小写敏感，可读任意属性（包括id、class），IE10+ 全兼容 -
dataset是只读映射：赋值el.dataset.userId = "1024"会写入 DOM，但不会触发 CSS 重匹配或事件；而setAttribute("data-user-id", "1024")才是可靠写法 - 首次渲染后动态加属性，
dataset不会立刻刷新——不是 bug，是惰性同步，下次访问才生效
自定义元素中监听 data 属性变化的正确姿势
原生 HTML 元素不支持监听 data- 变更；只有通过 customElements.define() 定义的自定义元素，配合 observedAttributes 和 attributeChangedCallback 才能响应。
-
static get observedAttributes()必须返回裸属性名，比如想监听data-disabled，得写['disabled']，不是['data-disabled'] -
attributeChangedCallback(name, oldValue, newValue)中，name是小写连字符形式（如'user-id'），不是驼峰 - 首次从 HTML 解析时也会触发该回调，
oldValue为null，需判空 - 值永远是字符串：
newValue === 'true'判断布尔，parseInt(newValue, 10)转数字，别信隐式转换 - 别在
constructor()里操作this.innerHTML或读子节点——此时 DOM 未挂载，不可靠
什么时候不该用 data-* 做状态管理
data- 是元数据容器，不是状态层。以下情况请换方案：
- 需要频繁开关的状态（如展开/收起）→ 改用
aria-expanded或class控制，更语义且利于可访问性 - 存储结构化数据（数组、对象）→ 序列化后存进
data-config，再JSON.parse()，并加try/catch - 要绑定事件处理器 → 别存函数名字符串然后
eval，应存标识符（如data-event-type="submit-form"），再查表映射真实函数 - 框架项目中混用
v-bind:data-id="id"和手动读dataset.id→ 绕过响应式系统，数据流不可控
最常被忽略的一点：dataset 映射发生在 DOM 解析阶段，但类型转换、状态同步、UI 更新全得你手动做；没有自动 diff，没有响应式代理，也没有默认生命周期钩子保障执行时机。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
