data-属性必须全小写加连字符命名，数字开头需用getattribute获取；筛选需键名统一、字段齐全；优先用getattribute避免类型转换错误；筛选前先隐藏全部再批量显示匹配项；data-值为静态快照，不随后台变化自动更新。
data-属性必须用小写连字符命名，否则dataset读不到
浏览器只识别data-category、data-price-range这类全小写+连字符的格式。写成data-categoryName或data_price，dataset.categoryName和dataset.price都会返回undefined。更隐蔽的问题是data-2024这种数字开头的，必须用el.getAttribute('data-2024')才能取到，dataset["2024"]虽可访问但语法受限。
筛选按钮和商品元素要共用同一组data-键名
比如按钮设data-filter="color"、data-value="red"，对应商品就得有data-color="red"。不能一个用data-color、另一个用data-colour——看似语义一致，实际匹配时完全对不上。多条件筛选时，商品上要同时带齐所有可能被筛选的字段：data-color="blue" data-size="L" data-in-stock="true"，缺一个就无法被完整条件命中。
用getAttribute()比dataset更稳，尤其涉及类型转换时
dataset会自动把data-active="false"转成字符串"false"，但Boolean("false")结果是true，直接导致状态判断翻车。正确做法是：el.getAttribute('data-in-stock') === 'true'。数字同理：parseInt(el.getAttribute('data-price'), 10)比+el.dataset.price安全，因为后者在属性名不规范时根本拿不到值。
筛选逻辑执行前先统一隐藏，避免视觉闪动
别用classList.toggle()逐个切换显示/隐藏——用户点选过程中会看到内容反复重绘。应该：
- 先对所有候选元素设
style.display = 'none' - 再用
document.querySelectorAll('[data-color="red"][data-size="L"]')批量找出匹配项 - 只对这批元素恢复
display（如'block'或'flex'）
真正容易被忽略的是：筛选条件一旦写进data-，它就只是静态快照。如果后端动态改了商品库存，data-in-stock不会自动同步——你得自己触发更新，或者换用其他机制兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
