<p>HTML 的 data-* 属性仅支持字符串型瞬态状态，适用于单元素局部样式与简单 JS 控制；一旦涉及类型转换、跨组件同步、异步更新或派生计算，必须改用 JS 变量、CustomEvent 或轻量 store。</p>
HTML 本身没有原生的「组件化状态管理」机制，所谓「HTML 组件化开发中的状态管理」，本质是用 data-* 属性 + JavaScript 手动协调，而非 Vue/React 那种响应式系统。它只适合极轻量、局部、瞬态的状态映射，不是状态管理方案。
data-* 属性能存什么状态？
它只能存字符串，且仅限于 DOM 元素自身或直系子元素可直接读取的瞬态信息：
-
data-expanded="true"：折叠面板当前是否展开，配合 CSS[data-expanded="true"]控制样式 -
data-active="123"：Tab 切换时标记当前选中项 ID，供 JS 快速定位 -
data-editing="true"：表格某行是否处于编辑态，决定td渲染文本还是input
一旦需要类型转换（比如把 "42" 当数字用）、跨元素同步、持久化到 localStorage 或响应异步更新，data-* 就该停用了——它不自动更新，也不触发重绘。
为什么不能用 data-* 替代 useState 或 Vuex？
因为 data-* 是静态快照，不是响应源：
立即学习“前端免费学习笔记（深入）”；
- 修改
element.dataset.loading = "true"不会触发任何监听或重渲染 - 多个组件无法订阅同一
data-变化；你得手动遍历、轮询、加 MutationObserver - 没有生命周期钩子，无法在状态变更前后执行副作用（如日志、校验、请求）
- 值始终是字符串，
JSON.parse(element.dataset.config)这类操作容易抛错，且无类型保障
真要共享状态，JS 变量、CustomEvent、或最小化的 store（比如一个 const store = { count: 0 } + dispatch 函数）更可靠。
什么时候必须放弃 data-*，改用 JS 状态？
出现以下任一情况，就该立刻把状态从 DOM 移回 JS：
- 状态需在两个以上不相邻的组件间同步（例如：顶部导航栏和侧边栏都依赖「用户登录态」）
- 状态变更依赖异步逻辑（如
fetch().then(() => el.dataset.ready = "true")不够，你还得通知其他模块） - 状态需要计算派生（如
data-unread-count要实时汇总多个消息源） - 你开始写
document.querySelectorAll('[data-status="loading"]')来批量操作——这说明状态已脱离单个元素边界
data-* 的边界很窄：它只负责「让 CSS 和本层 JS 少写一句 querySelector」。越界使用，只会让调试变得不可预测——比如你改了 dataset，但视图没变，第一反应永远是「是不是忘了 re-render？」而不是「我根本没设计响应链」。
