data-*属性不能作为配置中心，仅支持字符串初始化传递；需手动读取、类型转换（如parseint、json.parse）和映射，推荐用内联json script替代。
HTML 本身不支持“属性映射”作为配置中心——data-* 只是字符串容器，不是响应式状态源，也不能自动同步到 JS 变量或组件逻辑中。真要实现页面级配置的中心化管理，得靠明确的约定 + 主动读取 + 类型转换，而不是指望属性自己“活过来”。
data-* 属性只能做初始化参数传递，不能当配置中心用
浏览器不会监听 data-config 的变化，也不会在 JS 中自动把 data-api-timeout="5000" 转成数字 5000。它只是字符串，且只在元素创建时生效一次。
- 修改 DOM 上的
data-api-timeout（比如用el.setAttribute('data-api-timeout', '8000')）不会触发任何更新逻辑 -
this.dataset.apiTimeout拿到的永远是字符串"5000"，不是数字5000 - 连字符命名会转驼峰：
data-api-timeout→dataset.apiTimeout，但data-API-Key→dataset.apIKey（不是apiKey），容易出错
想让 data-* 真正参与配置管理，必须手动映射 + 类型转换
在自定义元素或初始化脚本里，显式读取、转换、赋值，才是可靠路径。别跳过这步，否则后续所有逻辑都会基于错误类型运行。
- 布尔值：用
value === 'true'或value !== 'false'，别信Boolean(value)（"false"也会变成true） - 数字：用
parseInt(value, 10)或parseFloat(value)，避免隐式转换出NaN - 对象/数组：建议用
JSON.parse(value)，但必须加try/catch，无效 JSON 会直接报错 - 时机很重要：在
connectedCallback()里读取比在constructor()更安全，因为此时子节点已就绪，dataset可靠
复杂配置建议绕开 data-*，改用 script[type="application/json"]
当配置项变多、嵌套变深、需要复用时，硬塞 data-* 会迅速失控。一个更清晰、可维护的替代方案是把配置写进内联 JSON：
<script type="application/json" id="page-config">
{
"api": {
"baseUrl": "https://api.example.com",
"timeout": 5000,
"retry": 2
},
"features": {
"analytics": true,
"darkMode": false
}
}
</script>
- JS 里用
JSON.parse(document.getElementById('page-config').textContent)一次性读取整份结构化配置 - 天然支持嵌套、布尔、数字、null，无需手动转换
- 便于服务端模板注入（如 Nunjucks、EJS），也方便前端单元测试 mock
- 比一堆
data-api-base-url、data-api-timeout更易维护、搜索和文档化
真正难的不是怎么把配置塞进 HTML，而是谁负责读、谁负责转、谁负责更新。data-* 容易让人误以为“写了就等于绑定了”，结果调试时发现变量还是字符串、开关没生效、超时设成了 5 秒却发了 50 秒请求——这些坑，都在读取那一刻就埋好了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
