data-*属性命名须全小写加连字符，否则浏览器忽略；读取特殊值或空字符串用getattribute()，判断存在用hasattribute()，修改必须用setattribute()，存对象需json序列化。
data-* 属性命名必须全小写加连字符，否则浏览器直接忽略
浏览器只识别 data-user-id、data-search-query 这类严格符合规范的写法。写成 data-userId、data_search_query、data-SearchTerm，DOM 树里根本不存在该属性——不是读不到，是压根没解析。常见现象：JS 里 el.dataset.searchQuery 返回 undefined，但 HTML 源码里明明写了 data-searchQuery="abc"，这就是命名违规导致的静默失败。
搜索场景下尤其容易踩坑：data-filter-type ✅ 可用；data-filterType ❌ 失效；data-api-version ✅；data-apiVersion ❌。数字开头如 data-2024-q 虽合法，但 JS 中只能用 el.dataset["2024Q"] 访问，点号语法会报错。
存搜索条件时，优先用 getAttribute() 读取原始值
搜索条件常含特殊字符（如 data-search-term="foo&bar"）、空字符串（data-sort-by=""）或 JSON 字符串（data-filters='{"status":"active","page":1}'）。这时 dataset 的驼峰转换和隐式处理反而添乱：
-
getAttribute('data-search-term')直接返回你写的原始字符串，不转义、不截断、不丢空格 -
el.dataset.searchTerm在含&或引号冲突时可能解析失败，返回undefined - 判断“是否设置了排序字段”：用
el.hasAttribute('data-sort-by')最准，el.dataset.sortBy === undefined无法区分“没设”和“设了空值”
修改搜索参数必须用 setAttribute()，dataset.xxx = ... 不持久
用户点击筛选按钮后要更新当前搜索状态，比如把 data-page="1" 改成 "2"。别写 el.dataset.page = "2"——这只会改内存副本，DOM 属性不变，后续 getAttribute('data-page') 仍返回 "1"，服务端渲染或调试工具也看不到变化。
真正生效的写法只有：
- 设置：
el.setAttribute('data-page', '2') - 删除（清空某条件）：
el.removeAttribute('data-filters') - 批量更新多个：
el.setAttribute('data-search-query', q); el.setAttribute('data-sort-by', s);
混用 dataset 赋值和 setAttribute 会导致两者值不一致，调试时极易误判。
存对象/数组搜索条件，必须手动 JSON 序列化 + getAttribute() 读取
搜索条件经常是结构化的，比如：data-filters='{"category":["book","video"],"price_range":[0,99]}'。直接塞对象进 dataset.filters = {...} 会变成 "[object Object]"，JSON.parse() 必然失败。
正确流程是：
- 写入前：
el.setAttribute('data-filters', JSON.stringify(filtersObj)) - 读取时：
const raw = el.getAttribute('data-filters'); const filters = raw ? JSON.parse(raw) : {}; - 务必加
try/catch，避免用户篡改 HTML 导致解析崩溃 - 不要用
dataset.filters读——驼峰转换可能错位键名（如data-filter-config→dataset.filterConfig），而 JSON 字段名是原样保留的
复杂搜索逻辑下，data- 只适合存轻量上下文，别当状态管理器用；一旦条件变多或需响应式同步，就该交给 URLSearchParams 或专用状态库。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
