data-* 属性仅是初始化参数容器，不具备通信能力，其值全为字符串，需手动类型转换；监听需在observedattributes中声明去data-后的名称；初始化应在connectedcallback中进行，而非constructor。
data-* 属性不是通信纽带，只是初始化参数容器
很多人把 data-user-id 或 data-config 当成组件间“自动通信”的桥梁，其实它完全不具备通信能力。它只是浏览器解析 HTML 时写进 DOM 节点的一串字符串，不会触发任何事件、不响应变化、也不跨上下文同步。两个 <user-card></user-card> 元素各自读取自己的 dataset.userId，彼此毫无感知。
真正起作用的通信机制，要么是 JS 主动读取 + 手动同步（比如在 connectedCallback() 里取值并更新内部状态），要么依赖 CustomEvent、postMessage、BroadcastChannel 等运行时手段。把 data-* 当通信层，等于把快递单号当成货物本身。
为什么 dataset 读出来全是字符串？
dataset 是只读映射，所有值都来自 HTML 属性文本，浏览器不做类型推断。哪怕你写 data-count="42" 或 data-active="true"，this.dataset.count 拿到的是 "42"，this.dataset.active 是 "true"，不是数字或布尔值。
-
Number(this.dataset.count)或parseInt(this.dataset.count, 10)才能得到数字 -
this.dataset.active === 'true'才能安全转布尔（不能用!!this.dataset.active，空字符串和"false"都为false） -
JSON.parse(this.dataset.config)处理对象/数组，但必须加try/catch，否则属性值非法会直接报错
attributeChangedCallback 怎么监听 data-* 变更？
attributeChangedCallback 不会自动监听 data-* 属性，必须显式声明要观察的“本质名”——也就是去掉 data- 后的部分，且全小写、用连字符分隔。
例如想监听 data-theme="dark" 的变化：
- 错误写法：
static get observedAttributes() { return ['data-theme']; } - 正确写法：
static get observedAttributes() { return ['theme']; } - 回调中
name参数是'theme'，newValue是字符串"dark"，仍需手动转换 - 首次从 HTML 解析时也会触发该回调，
oldValue为null
data-* 和自定义元素生命周期怎么配合才不踩坑？
dataset 在 constructor() 中可读，但此时 DOM 未挂载，子节点不可靠；innerHTML、querySelector 等操作大概率失效。真正的初始化时机是 connectedCallback()。
- 别在
constructor()里调用this.innerHTML = ...或遍历子元素 - 配置读取、事件绑定、模板渲染统一放到
connectedCallback() - 若需响应后续属性变更，再叠加
observedAttributes+attributeChangedCallback - 注意命名规范：HTML 写
data-show-avatar="true"，JS 读this.dataset.showAvatar（连字符自动驼峰），但data-UID不会变成dataset.uid
最常被忽略的是类型转换和生命周期错位——以为写了 data- 就万事大吉，结果逻辑跑在空节点上，或者拿字符串当布尔值判断，整个状态就错位了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
