data-* 属性不能直接当状态用，因为 dataset 只读取初始值且所有值均为字符串，框架若直接用其做响应式源会错判类型、漏掉后续变更，导致渲染不一致或解析错误。
data-* 属性为什么不能直接当状态用
因为 dataset 只读取初始值，且所有值都是字符串——data-count="42" 读出来是 "42"，不是数字；data-active="true" 是字符串 "true"，不是布尔值。框架若直接拿 dataset 做响应式源，会错判类型、漏掉后续变更。
常见错误现象：
- 在 React/Vue 组件 mount 后改
el.setAttribute('data-id', '500')，但组件没重渲染 - 把
data-config='{"theme":"dark"}'当 JSON 解析，没加try/catch，JSON.parse()报错中断初始化 - SSR 渲染的 HTML 中
data-值被客户端 JS 覆盖，但框架没监听属性变化，导致首屏与 JS 状态不一致
哪些全局属性真能触发 DOM 更新并被框架感知
真正能触发浏览器原生重绘或焦点行为的只有少数几个：id、class、hidden、contenteditable、tabindex。它们变更时，浏览器会同步更新布局、可访问性树或焦点流，框架（如 Alpine.js、htmx）才可能基于此做响应。
实操建议：
-
hidden是布尔属性，存在即生效，删掉就显示；但旧版 Safari/IE 需 fallback 到style.display = 'none' -
class变更最稳定，用element.classList.toggle('loading')比操作className更安全 -
contenteditable元素内容变，不发input事件，必须手动监听input或blur才能同步到状态 - 别指望
title或lang触发任何 UI 变化——它们只影响提示和辅助技术，不驱动渲染
自定义元素中如何让 data-* 参与状态追踪
原生 data-* 不支持响应式，但配合 customElements + attributeChangedCallback 可桥接。关键点：必须在 static get observedAttributes() 里声明属性名（不含 data- 前缀），且只监听已声明的属性。
容易踩的坑：
- 写
observedAttributes: ['data-user-id']—— 错！应写['user-id'] - 在
constructor()里就读this.dataset.userId，此时 DOM 还没挂载，shadowRoot为空 - 改了
this.dataset.active = 'false'—— 不会触发attributeChangedCallback，必须用this.setAttribute('active', 'false') - 多个实例共享同一
data-值，但没区分作用域，导致状态互相覆盖
框架绑定时 attributeChangedCallback 和 MutationObserver 的选择
现代轻量框架（如 htmx、Alpine）多数用 MutationObserver 监听 data- 变更，因为它能捕获任意节点的属性增删改；而 attributeChangedCallback 仅对自定义元素生效，且需提前注册监听列表。
性能与兼容性权衡：
-
MutationObserver开销略高，尤其监听整个document时；建议限定目标节点，如只观察document.body或特定容器 -
attributeChangedCallback更精准，但无法监听非自定义元素的data-变更——比如你不能靠它监听普通<div data-state="loading"></div> - SSR 场景下，服务端生成的
data-值不会触发客户端回调，必须在 hydration 后显式调用一次初始化逻辑 - Chrome 122+ 支持
observe({ attributeFilter: ['data-state'] })，但 Firefox 需兼容写法：过滤后手动比对mutation.attributeName
真正麻烦的从来不是怎么写，而是谁在改、什么时候改、改完有没有人知道——data- 是单向通道，hidden 和 class 才是双向信标。别让“看起来能用”掩盖了状态源头失控的风险。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
