data-*属性仅适合存储轻量、静态、非敏感的视图层元数据，不能替代状态管理；所有值均为字符串，需手动类型转换，且无响应式能力，仅适用于dom元素自身或直系子元素的瞬态状态映射。
HTML 自定义属性（data-*）本身不能替代状态管理库，也不该被当作状态的唯一来源——它只适合做「视图层状态的轻量映射」，比如按钮是否禁用、折叠面板是否展开、当前选中项 ID 等可直接从 DOM 推导且无需跨组件同步的瞬态信息。
什么时候该用 data- 存状态？
适用场景非常明确：状态只服务于当前元素或其直系子元素的渲染，且不依赖异步逻辑或复杂计算。比如：
- 一个折叠卡片的展开/收起状态，由用户点击触发，仅影响自身
max-height和图标旋转 - 表格行的「编辑中」状态，用于切换
td内是文本还是input - Tab 切换时，用
data-active="true"标记当前激活项，配合 CSS 的[data-active="true"]选择器控制样式
一旦出现「多个组件需要响应同一状态变化」或「状态需持久化到 localStorage」，就该交给 JavaScript 变量或 useState/store 管理，而非往 DOM 上堆 data-。
dataset 读写要注意类型和命名规范
element.dataset 是访问 data- 属性的推荐方式，但它会自动把连字符转为驼峰——data-user-id 对应 element.dataset.userId，而 data-URL 会被忽略（不符合 HTML 规范）。常见坑：
- 写入非字符串值会自动转成字符串：
el.dataset.count = 42→ 实际存的是"42"，取出来要parseInt(el.dataset.count) - 布尔属性如
data-loading="true"不代表真值；判断要用el.hasAttribute('data-loading')或显式比较el.dataset.loading === 'true' - 避免用
data-id这类泛名，优先带上下文前缀：data-product-id、data-form-valid
用 CSS 配合 data- 实现零 JS 视图切换
很多简单交互根本不需要 JS 监听事件，纯靠属性 + CSS 就能完成。例如折叠面板：
<div class="panel" data-expanded="false">
<button onclick="this.parentElement.toggleAttribute('data-expanded')">Toggle</button>
<div class="content">...</div>
</div>
对应 CSS：
.panel .content { max-height: 0; overflow: hidden; transition: max-height 0.2s; }
.panel[data-expanded="true"] .content { max-height: 500px; }
这里的关键是：JS 只负责 toggle 属性，所有样式响应完全交给 CSS，既轻量又可靠。注意不要用 [data-expanded]（只要有该属性就匹配），而要用 [data-expanded="true"]，否则初始未设值时也会误触发。
别把 data- 当作状态同步通道
常见错误是让多个组件通过读写同一个父元素的 data- 来“通信”，比如 A 组件改 data-selected-id，B 组件轮询监听变化。这会导致：
- 无法响应式更新：DOM 属性变更不会触发重绘，除非手动
dispatchEvent - 竞态问题：A 和 C 同时写同一属性，谁先谁后不可控
- 调试困难：状态散落在 DOM 中，Chrome DevTools 里看不到实时变化链
真正需要共享的状态，应该收敛到单一数据源（如 React 的 useState、Vue 的 ref 或全局 Map），DOM 的 data- 仅作为该状态在视图上的「投影」，由数据源驱动更新，而不是反过来。
最常被忽略的一点：data- 属性的更新是同步的，但浏览器渲染是异步的。如果在一次 JS 执行中反复读写同一 dataset 并期望立即看到样式变化，大概率会拿到旧值——这时候得用 getComputedStyle 或 requestAnimationFrame 做节奏对齐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
