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

vue

遇坑及填坑

最近在写业务的时候,有用户反馈说页面的卡片排布怎么好像有些错位啊,卡片出现了重叠,但是刷新一下又解决。由于这个问题很偶发,本地测试表示真是难修复!所以,在自己无意中刷出这个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拼错了,导致样式变成全局样式了。

以上是 【vue】样式不生效竟是scoped惹得锅 的全部内容, 来源链接: utcz.com/z/377593.html

回到顶部