data-* 属性仅用于静态初始化参数，非状态容器；应存 theme、endpoint 等低频上下文信息，避免存 cart-count 等动态状态，否则引发 ui 不同步、ssr 不一致、类型错误等问题。
data-* 属性不是状态容器，只是初始化参数通道
它只适合存静态、低频、与渲染无关的上下文信息，比如 data-theme="dark"、data-api-endpoint="/users"。一旦你把它当状态用——比如存 data-cart-count="5" 或 data-is-loading="true"，后续 JS 修改后 UI 不同步、SSR 与客户端值不一致、类型错乱（"true" ≠ true）就全来了。
常见错误现象：
- 服务端渲染出
data-count="10"，JS 里直接el.dataset.count + 1得到"101" - 在自定义元素
constructor()里读this.dataset.id，DOM 还没挂载，返回undefined - 把
data-config='{"sort":"date"}'直接JSON.parse()，没加try/catch，解析失败整个组件崩溃
dataset API 是唯一安全读写入口，命名必须全小写+连字符
浏览器只识别严格符合规范的 data- 属性：前缀后只能是小写字母、数字、短横线（-），不能有大写、下划线、点号或空格。写成 data-userId 或 data_user_id，DOM 解析时直接忽略——你在 DevTools 里都看不到它，element.dataset.userId 肯定返回 undefined。
正确写法与访问方式：
-
data-user-id→ JS 中读作element.dataset.userId -
data-api-endpoint→ 读作element.dataset.apiEndpoint -
data-product-sku-2026→ 读作element.dataset.productSku2026
别用 setAttribute('data-xxx', ...) 手动操作；优先走 element.dataset.xxx = "value"，它会自动同步到 attribute，更稳定。
布尔属性和非布尔属性的同步规则完全不同
data-* 属于非布尔属性，dataset 和 setAttribute 基本实时双向同步；但像 checked、disabled、hidden 这类布尔属性，attribute 和 property 并不等价——JS 应该操作 property（el.checked = true），而不是反复 setAttribute。
关键差异：
-
elem.dataset.id = "123"→ 自动触发setAttribute('data-id', '123') -
input.value = "abc"≠input.setAttribute('value', 'abc')（后者只改 HTML 初始值，不更新输入框显示） -
el.hidden = true是可靠显隐控制方式；setAttribute('hidden', '')容易与 property 不同步
真正驱动视图更新的是 class 和 hidden，不是 data-*
data-* 不触发重绘，也不响应变更。需要 UI 变化时，得靠 class 或 hidden 这类原生支持“属性变更 → 视图重绘”的全局属性。
实操建议：
- 多状态 UI（loading / success / error）用
el.classList.toggle('loading')控制，配合 CSS 类名 - 显隐切换统一用
el.hidden = true/false，别依赖data-visible="false"再 JS 判断 - 如果非要用
data-响应变更，唯一可控路径是自定义元素 +attributeChangedCallback，原生div或span加data-没有任何通知机制
最常被忽略的一点：data-* 的值永远是字符串，且只映射初始 HTML 值。后续 JS 改了 dataset，不会自动触发组件重新 render —— 这不是 bug，是设计使然。把它当配置传参可以，当状态源用，就是自己给自己埋坑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
