data-* 属性不持久化，仅是 dom 节点上的静态字符串；dataset 修改不写入 html，需 setattribute 才真正生效；适合存轻量公开标识，不适合存敏感、复杂或高频状态。
data-* 属性本身不持久化，它只是 DOM 节点上的静态字符串键值对；所谓“持久化”必须靠外部机制配合，否则刷新页面就丢。
为什么 dataset.xxx = 'val' 不会真正写入 HTML
你调用 element.dataset.userId = '123' 时，浏览器只更新了内存中 dataset 的代理副本，原始 HTML 的 data-user-id 属性值没变。DevTools 里看不到变化，服务端抓取 HTML 也拿不到新值。
- 真正写入 DOM 必须用
element.setAttribute('data-user-id', '123') - 读取建议统一用
element.getAttribute('data-user-id')，避免dataset缓存错乱（比如先设dataset.foo = 'a'，再setAttribute('data-foo', 'b')，后续dataset.foo还是返回'a'） -
dataset自动做连字符转驼峰（data-api-key→apiKey），但写属性名时仍要严格匹配原始大小写
data-* 在状态管理中适合存什么、不适合存什么
它适合轻量、公开、低频变更的上下文标识，比如组件类型、初始配置、调试标记；不适合当状态容器或缓存层。
- ✅ 适合：
data-component="chart"、data-theme="dark"、data-loaded="true"—— 用于初始化逻辑或 CSS 选择器 - ❌ 不适合：
data-user-data='{"name":"...","token":"..."}'—— 值过长拖慢 DOM 序列化，且敏感信息暴露在源码里 - ⚠️ 类型陷阱：所有值都是字符串，
data-count="42"读出来是"42"，不是数字；data-active="true"是字符串"true"，不是布尔值，需手动JSON.parse()或=== 'true'
如何让 data-* 参与真实生命周期响应
data-* 没有内置监听机制，想“响应变化”，必须自己绑定事件或结合 Custom Element 生命周期。
- 页面级使用：确保在
DOMContentLoaded后读取，避免 SSR 渲染未完成导致dataset为空 - Custom Element 中：声明
static get observedAttributes() { return ['data-user-id']; }（注意写完整属性名，不是userId） - 在
attributeChangedCallback(attrName, oldValue, newValue)里处理逻辑，首次挂载用this.getAttribute('data-user-id')读初始值 - 别在
constructor里操作 DOM 或发请求 —— 此时元素还没插入文档
真正需要持久化的状态，该交给谁
如果你的状态要跨页面刷新存在、支持异步加载、带类型或加密需求，data-* 就不该是主力载体。
- 用户偏好类（主题、语言）：用
localStorage+document.documentElement.setAttribute('data-theme', value)同步到 DOM - 表单草稿、动态列表项：序列化为 JSON 存
localStorage，页面加载时重建 DOM，再补上对应data-属性用于定位或样式 - 登录态、令牌：必须走
httpOnly cookie或内存变量，绝不可塞进data-token - 高频更新状态（如 Canvas 动画帧数据）：用纯 JS 对象或
Map管理，data-只留必要标识，避免反复读写 DOM
最容易被忽略的是：DOM 属性操作本身有性能开销，尤其在循环中频繁 setAttribute；如果只是为了标记状态供 JS 逻辑用，直接维护一个 Map 或 WeakMap 往往更轻量、更可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
