【vue】样式不生效竟是scoped惹得锅

遇坑及填坑

最近在写业务的时候，有用户反馈说页面的卡片排布怎么好像有些错位啊，卡片出现了重叠，但是刷新一下又解决。由于这个问题很偶发，本地测试表示真是难修复！所以，在自己无意中刷出这个bug的页面是，我立刻打开控制台看看究竟是什么作怪？！

hover到元素上，发现元素上的样式的确是我自定义的没有错！但是为什么会有多个咧？？

没有带[data-v-399aa65a]的.chart-wrapper样式代码我没有写啊，为什么会在这里生效呢？
于是，我在项目全局搜索了.chart-wrapper，发现有其他页面也定义了这个样式。然后仔细排查发现，原来是有一个页面把scoped误拼写成scope了！这便导致了.chart-wrapper变成了一个全局样式！当用户先访问了这个拼错scoped的页面，再访问目标页，目标页就会同时有全局样式.chart-wrapper和局部样式.chart-wrapper，那么UIbug就出现了。

反思

通过这次的踩坑，我决定深入去看看style加scoped属性底层到底是做了些什么？

1. 用途：防止全局同名CSS污染（不然就会出现我上述的坑啊！）
2. 原理：scoped会在元素上添加唯一的属性（data-v-x形式），再在选择器时加上对应[v-data-something]，即CSS带属性选择器，以此完成类似作用域的选择方式，从而达到限制作用域的目的。

所以，当发现有样式问题时，不妨从最简单查看元素开始。看看元素上的样式是否带有hash值，如果没有很可能就是scoped拼错了，导致样式变成全局样式了。