data属性值始终为字符串，即使写true/false也不会自动转为布尔类型；应使用hasattribute判断存在性、显式转换如=== "true"或json.parse，避免误判。
data属性里写 true 或 false 不等于布尔类型
HTML 的 data- 属性值永远是字符串，哪怕你写 data-active="true"，用 JavaScript 读出来也是 "true"（带引号的字符串），不是布尔值 true。浏览器不会自动转换类型，这是最常被误以为“已生效”的地方。
常见错误现象：
– element.dataset.active === true 返回 false
– 条件判断 if (el.dataset.enabled) { ... } 在值为 "false" 时仍进入分支（因为非空字符串是真值）
- 判断逻辑应显式转换：用
el.dataset.flag === "true"或JSON.parse(el.dataset.flag)（仅当确认值为合法 JSON 字符串时） - 更安全的做法是约定语义：存在该属性即表示
true，缺失或值为空字符串即false，比如<div data-loading></div> - 避免用
"0"/"1"模拟布尔——易与数字混淆，且Boolean("0") === true
用 hasAttribute 判断布尔开关最可靠
如果只是表达“开/关”“启用/禁用”这类二元状态，不依赖具体字符串值，直接检查属性是否存在比解析字符串更简洁、无歧义。
使用场景：按钮是否禁用、组件是否加载中、折叠面板是否展开等 UI 状态标记。
-
el.hasAttribute("data-disabled")→true表示禁用 -
el.removeAttribute("data-disabled")即关闭状态，无需设为"false" - 这样既避免字符串解析错误，也省去
dataset的大小写转换（data-foo-bar→dataset.fooBar）
需要传复杂布尔组合时，改用 JSON.stringify 存储
如果必须在 data- 属性中塞多个布尔字段（比如 { editable: true, deletable: false, visible: true }），不要拼接字符串，用 JSON 序列化。
注意点：
– 值必须是合法 JSON，不能含函数、undefined、循环引用
– HTML 中需转义双引号，推荐用单引号包裹属性值，或用 JSON.stringify 后再 replace(/"/g, """)
- 写入：
el.setAttribute("data-config", JSON.stringify({ enabled: true, locked: false })) - 读取：
JSON.parse(el.getAttribute("data-config")) - 失败时加 try/catch，避免因属性值损坏导致脚本中断
Vue/React 等框架里别依赖 data- 传布尔 props
框架组件的 prop 类型由组件定义控制，data- 属性不会自动映射为布尔 prop。例如 <mybutton data-disabled="true"></mybutton> 不会让 MyButton 的 disabled prop 变成 true，除非你手动解析并传递。
容易踩的坑：
– 在模板中混用 data- 和响应式 prop，造成状态不一致
– 用 v-bind 绑定时误写成 :disabled="data-disabled"（实际应是 :disabled="someRef"）
- 框架内优先用原生 prop 或 v-model / useState 控制状态
-
data-仅用于 DOM 层面的轻量标记，比如 CSS 选择器钩子或调试标识 - 若需从 HTML 初始化状态，应在组件挂载时读取
dataset并赋值给响应式变量
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
