SSR中data-属性仅作初始化快照，客户端须显式转换类型并立即弃用；状态更新应通过class、hidden等可靠property操作，避免直接读写data-导致水合失败或UI脱节。
服务端渲染（SSR）中用 data- 属性同步状态，本质上是“单向快照传递”，不是双向绑定；客户端激活时若直接读 dataset 或反复操作 setAttribute，极易因类型错乱、时机错位、diff 不一致导致水合失败或 UI 脱节。
SSR 输出的 data- 值只应作为初始化入口
服务端吐出的 <div data-user-id="123" data-is-admin="true"></div>，在客户端首次挂载时只能用于初始化 JS 状态，之后必须完全脱离该属性运行。常见错误包括：
-
dataset.userId + 1得到"1231"——因为dataset所有值都是字符串，不转类型就参与运算必错 - 在 React/Vue/Svelte 水合前就调
el.setAttribute('data-user-id', '456')，导致框架比对 HTML 字符串时发现不一致，直接报Hydration failed - SSR 模板里动态插值
data-count="{{state.cartCount}}"，但客户端 store 初始值为空对象，state.cartCount是undefined，服务端与客户端初始值天然不一致
实操建议：
- 客户端初始化时，统一用
el.getAttribute('data-user-id')取原始字符串，再显式转换：parseInt(el.getAttribute('data-user-id')) || 0 - 布尔值必须显式判断：
el.getAttribute('data-is-admin') === 'true'，而不是!!el.dataset.isAdmin（后者对"false"也返回true） - 结构化数据一律走
try { JSON.parse(el.getAttribute('data-config')) } catch (e) { {} }，别信dataset.config—— 它会把连字符转驼峰，键名已失真
客户端激活后，data- 必须被“遗忘”
水合完成、组件进入运行时后，data- 属性就不再是状态源，也不该再被写入或监听。它既不响应 JS 状态变更，也无法触发视图更新。继续把它当状态容器，等于主动引入竞态和脱节。
立即学习“前端免费学习笔记（深入）”；
常见错误现象：
- 用户点击按钮后，JS 执行
el.setAttribute('data-loading', 'true')，但 CSS 无反应——因为data-loading不触发重绘 - 自定义元素在
attributeChangedCallback里监听data-status，但外部用myEl.status = 'error'改状态，回调根本不会触发 - 多个同组组件靠
data-sync-group广播事件，但某组件手动改了data-id却没发事件，其他组件状态停滞
实操建议：
- 所有状态驱动逻辑走
el.hidden = true、el.classList.toggle('loading')这类原生可重绘通道 - 跨组件同步用
CustomEvent+data-sync-group显式广播，而非依赖某个元素的data-值被“悄悄改掉” - 若需持久化，直接读写
localStorage.getItem('user-preference')，不要把 key 名塞进data-sync-key="user-preference"后还幻想它自动联动
真正能水合成功的，只有 class 和 hidden 的 property 变更
class 和 hidden 是少数几个浏览器保证“property 变更 → attribute 同步 → 视图重绘”全链路可靠的全局属性。它们不依赖框架，不挑时机，且 SSR 输出的初始值与客户端 property 操作天然兼容。
关键细节：
-
el.hidden = true会自动移除hiddenattribute（如果存在），并立刻隐藏元素；而el.setAttribute('hidden', '')可能导致el.hidden仍为false，造成 property/attribute 不同步 -
el.classList.toggle('state-error')比el.className = 'base error'更安全：前者只增删指定 class，后者会覆盖全部 class，容易丢掉动态生成的样式 - SSR 可以安全输出
<div class="card state-loading"></div>，客户端激活后执行el.classList.remove('state-loading')，DOM diff 不会中断，视觉更新即时
复杂点在于：你得亲手把 JS 状态映射到这些属性上。没有魔法，也没有自动同步——比如 store.getState().isLoading 为 true，你就得写一行 el.classList.add('loading')。漏掉这一步，UI 就永远卡在旧状态。
