data-config存json必须用json.stringify()，直接赋对象会变"[object object]"导致解析报错；读取应使用getattribute()而非dataset；修改须用setattribute()，删除用removeattribute()；css匹配需加引号，data属性仅适合存静态配置。
data-config 存 JSON 字符串必须用 JSON.stringify()
直接往 data-config 里塞对象会变成 "[object Object]"，读出来再 JSON.parse() 必然报错 SyntaxError: Unexpected token o。浏览器只认字符串，dataset 不做任何序列化——它连 toString() 都懒得调，直接把对象转成固定字符串 "[object Object]"。
正确做法是手动序列化：
const config = { theme: "dark", series: [{ name: "销量", data: [12, 19, 3] }] };
el.setAttribute("data-config", JSON.stringify(config));
注意三点：
-
JSON.stringify()是唯一能保结构的方案；join()、toString()、手拼字符串全都不行，遇到嵌套对象或null就崩 - 值含
undefined、Date、RegExp、function会被静默丢弃，建议存之前用console.log(JSON.stringify(config))看一眼输出 - 用户输入内容要防 XSS：如果后续会把
data-config拼进innerHTML或eval()，必须先过滤或转义
读取时优先用 getAttribute() 而不是 dataset.config
dataset.config 看似方便，但实际容易出错：如果 HTML 里写的是 data-chart-config，JS 里得写 dataset.chartConfig；要是写成 data-config-v2，就得 dataset.configV2。稍一疏忽命名不一致，就返回 undefined，还不会报错。
更稳的方式是绕过驼峰转换，直取原始属性：
const raw = el.getAttribute("data-config");
const config = raw ? JSON.parse(raw) : {}; // 加 try/catch 更好
这样做的好处：
- 不依赖 dataset 的自动映射逻辑，避免因命名不规范（比如含数字开头、大小写混用）导致读不到
- 不用记驼峰规则，HTML 里怎么写，JS 里就怎么 get
- 配合
|| "{}"或try/catch，能兜住空值和解析失败，不至于整个图表初始化卡死
修改图表配置项必须用 setAttribute()，别碰 dataset
el.dataset.config = JSON.stringify(newConfig) 看起来能跑，但只是改了内存里的映射副本，DOM 上的属性没变：getAttribute("data-config") 还是旧值，CSS 选择器也不会重新匹配，其他监听 DOM 变化的代码（比如 MutationObserver）也收不到通知。
真正生效的写法只有一种：
el.setAttribute("data-config", JSON.stringify(newConfig));
还要注意：
- 删除配置项用
el.removeAttribute("data-config")，delete el.dataset.config完全无效 - 如果要批量更新多个 data 属性（比如同时改
data-config和data-series-count），别反复调setAttribute，可以封装成函数统一处理 - 频繁修改会触发重排，图表类组件建议在状态稳定后再一次性写入
CSS 选择器匹配 data 属性要加引号
想根据图表配置动态加样式，比如 [data-config*="theme":"dark"] 这种写法根本无效。CSS 里匹配 data 属性值必须用带引号的字符串：
[data-config*='"theme":"dark"'] { --chart-bg: #1e1e1e; }
但更推荐用简化策略：
- 单独拆出语义化字段，比如
data-theme="dark"，然后写[data-theme="dark"]—— 简单、可靠、可读性强 - 避免在 CSS 里解析 JSON 字符串，性能差且不可靠；data 属性本就不适合当“配置解析器”用
- 如果主题切换频繁，建议用 class 控制样式，data 属性只负责传参，别让它承担渲染职责
最常被忽略的一点：data 属性不是状态管理器。它适合存初始化配置、服务端预置参数这类静态元数据。一旦图表开始交互，状态变化（比如 zoom 级别、选中 series）应该交给 JS 变量或 store 管理，而不是反复读写 data-config —— 那样既慢，又容易和 DOM 同步逻辑打架。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
