data属性仅为字符串容器，不触发响应式更新，需手动类型转换与状态同步，适合瞬态标记而非跨组件状态管理。
直接用 dataset 设置或读取即可，但必须清楚：data 属性只是字符串容器，不自动触发任何状态响应，也不能替代 JS 中的状态变量。
data-属性只能存字符串，别指望它自动转布尔或数字
你写 <button data-disabled="true">，JS 里 this.dataset.disabled 拿到的是字符串 "true"，不是布尔值 true。同理，data-count="42" 读出来是 "42"，不是数字 42。
- 需要类型转换时，自己加判断：
const isDisabled = this.dataset.disabled === 'true' - 数值类用
parseInt(this.dataset.count, 10)或Number(this.dataset.count)，并处理NaN情况 - JSON 字符串（如
data-config='{"theme":"dark"}'）必须用JSON.parse(this.getAttribute('data-config')) || {}，且要包try/catch
修改 data 属性不会自动更新视图，得手动同步
设置 element.dataset.active = 'true' 只是改了 DOM 属性，浏览器不会因此重绘、也不会触发自定义元素的 attributeChangedCallback——除非你显式声明了监听该属性。
- 自定义元素中，必须在类上写
static observedAttributes = ['active']，再配合attributeChangedCallback做后续动作 - 普通元素（如
<div>）改dataset完全无声无息，CSS 也不会响应，除非你用属性选择器（如div[data-active="true"]）且已提前写好样式 - 想让样式生效，得确保 CSS 规则用了对应属性选择器，例如：
button[data-loading="true"] { opacity: 0.6; cursor: not-allowed; }
data-属性适合做“瞬态标记”，不适合做跨组件状态源
它只适合标记当前元素或其直系子元素的简单状态，比如按钮是否加载中、面板是否展开、当前代码示例的语言标识。一旦涉及异步、计算、多组件共享，就必须用 JS 变量或状态管理逻辑来驱动，再把结果同步到 data- 上供 CSS 或无障碍使用。
立即学习“前端免费学习笔记（深入）”；
- 不要在多个组件间靠
dataset传递状态，容易不同步、难调试 - 避免用
data-存敏感信息（如 token、用户 ID），它完全暴露在 HTML 源码里 - 服务端渲染后客户端接管时，首次读
dataset是安全的；但之后反复改它，不等于状态已更新——得靠 JS 显式维护一份 truth source
真正容易被忽略的是：data 属性变更本身不构成“状态变化事件”。你得自己决定什么时候读、什么时候写、什么时候同步到 UI，没有魔法，也没有自动绑定。
