data-*属性仅用于组件初始化，不可作为响应式状态源；需挂载后立即读取并转换类型，结构化数据须JSON.parse()加try/catch，优先放在<html>或<body>上，敏感信息严禁使用，监听变更需通过Custom Element实现。
直接用 data-* 属性初始化组件，比写一堆 JS 初始化代码更轻、更可靠——前提是别把它当状态源用，也别指望浏览器自动监听变更。
data-* 只能用于初始化，不能当响应式状态用
很多人把 data-user-id 或 data-config 当成可监听的“状态”，结果发现改了 HTML 里的值，JS 里读不到更新，或者 dataset.count 是字符串 "5"，dataset.count + 1 得到 "51" 而不是 6。
- 初始化时读一次就够了：挂载后立刻转类型存进组件内部变量，比如
const count = parseInt(el.dataset.count) || 0 - 结构化数据必须 JSON.parse()，且加
try/catch：JSON.parse(el.getAttribute('data-config') || '{}') -
constructor()里别急着读this.dataset，此时 DOM 还没挂载，值是undefined - SSR 渲染时，服务端和客户端初始值不一致会丢状态，避免在模板里动态生成
data-值
挂在哪？<html> 或 <body> 最稳
别把配置塞进某个 <div id="app"> 里——组件还没挂载，JS 就去读，容易读空；多个组件共用同一份配置时还可能重复定义。
-
<html data-api-base="/api" data-env="prod">：最优先，document.documentElement.dataset任何脚本都能立刻访问 -
<body data-config='{"timeout":5000}'>：次选，适合含较多字段的 JSON 配置 - 业务组件专属配置（如
data-user-id）才放容器上，且确保该组件一定存在、且只读一次 - 敏感信息（密钥、token）严禁走
data-，应由接口动态返回并鉴权
配合 jQuery data() 或原生 dataset 读取更安全
jQuery 的 .data() 会自动做类型转换（"true" → true，"123" → 123），但只对首次读取生效；原生 dataset 更可控，但全是字符串，必须手动处理。
立即学习“前端免费学习笔记（深入）”；
- jQuery 场景：
$('select[data-url]').combobox()，组件内部用this.data('url')获取 - 原生场景：
el.dataset.apiBase→"https://api.example.com"，el.dataset.timeout→"5000"（注意是字符串） - 别混用：
el.setAttribute('data-count', 10)后再用el.dataset.count读，没问题；但用el.dataset.count = 10不会同步到属性，DOM 检查看不到 - 服务端模板输出 JSON 时，务必 HTML 实体转义：
data-config="${escapeHtml(JSON.stringify(cfg))}"
真要监听 data- 变更？只能靠 Custom Element
普通 <div> 上改 data-，浏览器不会通知 JS。想做到“HTML 改了，组件自动响应”，唯一路径是自定义元素 + attributeChangedCallback。
- 注册时声明观察的属性：
static observedAttributes = ['data-theme', 'data-disabled'] - 回调里手动解析：
if (name === 'data-theme') this.theme = newValue || 'light' - 别在回调里直接操作 DOM，先更新内部状态，再触发
this.requestUpdate()（Lit）或手动重绘 - 普通项目没必要走这条路——绝大多数初始化参数根本不需要运行时变更
真正容易被忽略的是：data-* 的价值不在“灵活”，而在“解耦”。它把配置从 JS 里抽出来，让设计师或后端也能安全修改，但一旦开始依赖它做状态同步，就等于绕开框架机制自己造轮子，反而增加不可控性。
