data-* 属性不能传递业务模型数据，因为它只存储字符串、不响应变化、不跨页面、不参与状态流，仅适合作为一次性初始化的元数据标识。
data-* 属性不能传递业务模型数据，它只存字符串、不响应变化、不跨页面、不参与状态流。
为什么 data-* 不是业务模型的传输通道
data-* 是 HTML 的“元数据容器”，不是状态载体。你写 data-user-id="1024"，JS 读出来永远是字符串 "1024"，不会自动转成数字，也不会在 user.id = 1025 时同步更新 DOM 属性——它没有监听器、没有 setter、没有生命周期钩子。
常见错误现象包括：
- 在 Vue/React 组件里既用
v-bind:data-id="id"又手动读dataset.id，结果 id 更新了但 dataset 没变，逻辑分支错乱 - 把整个配置对象 JSON.stringify() 塞进
data-config，后续修改对象属性时完全无法感知，只能靠轮询或重渲染 - 误以为
data-collapse-group="settings"能让两个页面的折叠逻辑自动联动，实际只是初始化时各读一次字符串
真正能承载业务模型的三个路径
跨组件（尤其跨页面）传递可变、结构化、带行为的业务模型，必须离开 HTML 属性层，进入 JS 状态管理域：
-
URLSearchParams：适合轻量、显式、可分享的模型片段，如?tab=analytics&range=last7d；接收端必须用parseInt(urlParams.get('range'), 10)手动转换类型，不能直接当数字用 -
sessionStorage：适合单次跳转携带复杂对象，比如表单页 → 预览页，存前JSON.stringify(formModel)，取后JSON.parse(sessionStorage.getItem('formModel'))；注意 Safari 私密模式可能禁用，需兜底到内存变量 -
postMessage：适合弹窗、iframe 等保持句柄的双向协作场景，比如主页传筛选条件给子报表页，子页回传聚合结果；必须校验event.origin，且不能传Date、RegExp等不可序列化类型
data-* 唯一安全的用法：驱动一次性初始化逻辑
当你需要同一套 JS 逻辑在多个 DOM 区域隔离运行，又不想改代码，data-* 是最轻量的作用域标记方式：
- 用
data-list-type="order"和data-list-type="product"区分两组列表的加载策略，JS 用document.querySelectorAll('[data-list-type="order"]')批量获取，再分别调用initOrderList()/initProductList() - 用
data-api-endpoint="/v2/users"告诉通用请求函数该调哪个接口，而不是硬编码 URL - 所有值仍需手动解析：
el.dataset.apiEndpoint是字符串，el.dataset.autoLoad === 'true'才算布尔真值
别把 data-* 当状态总线用。它没订阅、没派发、没深比较，连 dataset.userId = 1025 都不会触发 DOM 更新——它的价值只在“识别”和“分发”，不在“承载”和“同步”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
