data-属性仅是静态字符串元数据，无法自动触发业务联动；深度联动必须由javascript主动读取、解析、同步状态并建立双向契约。
data- 属性不是业务联动的触发器，它只是静态容器
真正实现深度联动的，是 JavaScript 主动读取 data- 值后做的逻辑判断与状态同步。HTML 本身不“知道”这些属性和业务对象的关系，也不会自动响应变化。
为什么不能靠 data- 属性自动联动
浏览器把 data- 属性当作纯字符串元数据，DOM 更新时不会触发任何监听或回调。比如你写 <div data-user-id="123"></div>，这个 123 不会自动绑定到某个用户对象，也不会在用户对象更新时反向刷新该属性。
- 修改
element.dataset.userId = '456'只改 DOM 属性，不触发业务层状态变更 - 业务对象（如
user.id）变了，data-user-id不会自动同步，除非你手动写同步逻辑 -
data-值始终是字符串，数字、布尔、对象都得自己JSON.parse()或类型转换
dataset 读写时的隐式转换陷阱
dataset 是只读代理，它把 data-foo-bar 映射成 fooBar，但所有值都是字符串 —— 这是最常踩的坑。
<button data-page="2" data-active="true"></button>-
btn.dataset.page→"2"，不是2；btn.dataset.active→"true"，不是true - 别直接用
if (el.dataset.active)判布尔，它永远为真（非空字符串） - 需要显式转换：
parseInt(el.dataset.page, 10)、el.dataset.active === 'true'
配合事件委托做轻量级对象映射
当多个元素代表同一类业务实体（如订单项、商品卡片），用 data- + 事件委托比每个元素绑独立 handler 更可靠。
- 给列表项加
data-order-id、data-status，统一监听父容器的click - 点击时从
event.target提取dataset.orderId，再查本地缓存或 API 获取完整对象 - 避免重复创建闭包，也防止动态插入元素漏绑事件
- 注意：不要在
dataset存敏感字段（如 token）、大对象（用sessionStorage或 ID 查表更稳）
真正联动要靠 JS 主动桥接
所谓“深度联动”，本质是建立 HTML 元素与 JS 对象之间的双向契约。这没法靠属性自动完成，必须编码明确约定。
- 初始化时：遍历带
data-entity-type的节点，用其dataset.id从 store 查对象，挂到元素.__boundData上 - 对象变更时：触发自定义事件（如
'user:updated'），监听器里找对应data-user-id的元素批量更新textContent或className - 用户操作时：点击按钮后，取
dataset.itemId，调用cart.addItem(item)，再刷新视图
容易被忽略的是：data- 只适合传递标识符或简单上下文，复杂状态同步必须走 JS 层控制流，否则很快就会出现视图与数据不一致。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
