data-sort-key 应用连字符或下划线命名（如"user-profile-age"），禁用点号；排序值存于 data-sort-value；读取须用 getattribute 保障原始字符串；data-sort-order 需显式字符串比对，不可转布尔；多列排序用 data-sort-active 标记唯一主列。
data-sort 属性怎么设才不会被浏览器“吃掉”
直接写 data-sort="number" 没问题，但写 data-sort-key="user.profile.age" 就会出事——浏览器把点号转成驼峰，dataset.sortKey 变成 userProfileAge，原始路径彻底丢失。
真正能稳定传递嵌套字段的，只有纯字符串格式。推荐用连字符或下划线：
-
data-sort-key="user-profile-age"→ JS 里约定映射为"user.profile.age" -
data-sort-key="user_profile_age"→ 后端前端共用命名，避免转换歧义 - 绝对不要用
.、[、]、空格或数字开头（如data-sort-key="2nd-priority"）
读取时别只依赖 dataset：带特殊字符或数字前缀的，必须用 getAttribute('data-sort-key') 拿原始值。
为什么不能靠 data-sort-order="false" 判断降序
data-sort-order="false" 在 HTML 中是**非空字符串**，Boolean("false") 结果是 true，直接当布尔值用会翻车。
正确做法是显式比对字符串值：
- 用
(el.getAttribute('data-sort-order') || 'asc').toLowerCase() === 'desc' - 未声明
data-sort-order时默认升序，有声明才检查值 - 接受大小写不敏感匹配，避免
DESC/Asc导致失效
CSS 选择器也认大小写：[data-sort-order="desc"] 不会选中 data-sort-order="DESC"。
多个可排序列共存时，怎么标记“当前正在排哪一列”
别把所有状态塞进 data-sort-order，比如同时设 data-sort-order="desc" 和 data-sort-order="asc" —— 这种耦合会让逻辑爆炸。
更清晰的做法是拆开职责：
- 用
data-sort-active="true"单独标记当前主排序列（仅一个th有这个属性） - 用
data-sort-order="asc"或data-sort-order="desc"描述该列方向 - 切换列时，先清掉所有
data-sort-active，再给新列加上
这样 DOM 状态和 JS 逻辑一一对应，调试时一眼看出谁在生效。
data-* 值里能不能塞 JSON 字符串
不能。像 data-sort-config='{"field":"price","order":"desc"}' 看似灵活，实际是陷阱：
- 引号容易和 HTML 属性引号冲突，导致解析失败
- 每次都要
JSON.parse()，性能白耗，还可能抛错 - 无法被 CSS 选择器定位，失去样式联动能力
真要复杂配置，用多个独立属性更可靠：data-sort-field="price" + data-sort-direction="desc" + data-sort-type="number"。结构扁平，读取快，容错强。
实际项目里最容易被忽略的，是 data 属性值的语义稳定性——它不是临时传参，而是 DOM 与 JS 之间的契约。一旦定下命名规则（比如全用连字符、不嵌套），后续所有排序逻辑、CSS 样式、甚至后端字段映射都得跟着走。改一个属性名，可能牵出三处 bug。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
