html的data-*属性仅作初始化字符串传递，无响应式能力；需通过自定义元素+dataset手动映射，或交由vue/angular等框架处理绑定逻辑。
HTML 本身没有“组件化”能力，data-* 属性不是绑定机制，只是字符串容器；真正实现属性映射与数据同步，必须依赖自定义元素（customElements.define()）配合 dataset 读取 + 手动响应式更新，或交由框架（如 Vue/Angular）接管绑定逻辑。
data-* 不是绑定，只是初始化参数传递
data-user-id="1024" 这类写法不会自动触发 DOM 更新，也不会让 JS 变量实时响应变化。它只在元素创建时提供一次性的字符串值，后续修改 HTML 属性（比如用 el.setAttribute('data-user-id', '1025')）不会触发任何监听回调。
-
this.dataset.userId读出来永远是字符串，"true"≠true，"123"≠123，必须显式转换 - 连字符命名自动转驼峰：
data-show-avatar→dataset.showAvatar，但data-UID不会变成dataset.uid - 不要在
constructor()中操作子节点内容（如this.innerHTML = ...），此时 DOM 尚未解析完成，dataset虽可读，但子元素不可靠
自定义元素中如何安全映射 data 属性到内部状态
在 connectedCallback() 或 attributeChangedCallback() 中做映射更稳妥，前者适合一次性初始化，后者适合监听后续变更（需配合 observedAttributes）。
- 用
static get observedAttributes()声明要监听的data-属性名（注意：只能监听标准属性名，不能直接监听data-user-id，得监听user-id） -
attributeChangedCallback(name, oldValue, newValue)中，name是去掉data-后的小写连字符形式，比如监听user-id，变更时name === 'user-id' - 手动把
newValue转成目标类型：布尔用newValue === 'true'，数字用parseInt(newValue, 10)，对象/数组建议用JSON.parse()并加try/catch
Vue/Angular 等框架里的 data-* 和绑定不是一回事
框架中的 v-bind:data-id="userId" 或 [attr.data-id]="userId" 是把值“渲染进 HTML”，生成的是真实 data-id="1024" 属性，它不参与响应式系统；而 v-model、@input、[url] 这些才是真正的绑定入口。
-
v-bind:data-config只是输出静态属性，改了userId数据，它会更新 DOM 上的data-config，但不会反过来影响逻辑 -
[url]="routerLink"是 Angular 的输入绑定，url是组件内@Input()声明的属性，和data-url无任何关系 - 混用
data-*和框架绑定容易产生歧义：比如既写v-bind:data-id="id"又在 JS 里读dataset.id，看似方便，实则绕过响应式，后续数据流不可控
别用 data-* 替代真正的状态管理
把配置全塞进 data-* 看似轻量，但很快会遇到边界：无法表达嵌套结构、不能监听变更、调试困难、SSR 时服务端与客户端 dataset 不一致。
- 复杂配置建议用
JSON.parse(this.getAttribute('data-config'))一次性加载，而不是拆成十几个data-xxx - 需要响应式更新的字段（比如主题色、开关状态），应走组件 props / input / reactive state，而非反复读写
dataset - 事件委托中用
data-action没问题，但动作对应的 ID（如data-row-id）务必用parseInt(btn.dataset.rowId, 10)，否则"5" + 1 === "51"
真正麻烦的从来不是怎么把值塞进标签，而是谁负责监听变化、谁决定何时更新、错误类型怎么收敛——这些 data-* 一个都不管。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
