前言
作为前端开发,在使用vue的过程中,应该经常会遇到scoped的使用,那各位有没有想过scoped是如何影响页面 的呢,又是如何保障样式不被污染的呢 ,在什么特殊情况下会出现scoped的bug彩蛋呢?
bug介绍
前情提要
在聊这个问题之前我们先介绍一种代码组织方式------------微组件,很简单就是将组件直接打包成js文件,然后在页面中进行引入使用。
这个bug出现的时候我们就使用微组件来引入了两个组件 ,这里简称为组件A,组件B吧
组件A和组件B的功能完全不一样,但是其目录结构都类似,入口都是index.vue 文件,里面都引入了公共的button组件。
A组件和B组件定义了自己的css模块,并通过scoped进行了包裹, 其中A组件通过deep操作了公共的button组件的样式。
错误表现
下图都并非真实,均为演示所需构造的图
在页面上展示的时候我们惊奇的发现,B组件的按钮都变得很短:
但是实际上当我们单独运行组件B时长度会更长些,很明显组件B被影响了
bug排查
既然bug出现了,那我们就想办法排查
我们发现控制台中组件B出现了两个特殊的样式:
错误代码定位
-
它们俩就是问题的根源,但是奇怪的是这个样式并没出现在组件B的代码中,同时我们排查主工程(引入组件A和组件B的项目),也没发现这两个样式的踪迹。
-
我们这里就开始考虑是不是其他微组件导致的,于是我们开始逐个禁用微组件,查看是否出现异常,终于在组件A中发现了这个代码的存在。
错误原因定位
组件A和组件B的css模块都使用了scoped做隔离,而且二者的位置都是同级的,按理说不会相互影响
遇到理解不了的问题,这时候就要从原理层面去进行剖析:
一、scoped是如何完成样式隔离的?
不妨回顾一下scoped是通过什么方式实现的css样式隔离:
vue的scoped会给当前文件的template中所有dom节点都加上特殊的自定义属性,这点就类似于生成了hash,然后在编译其css模块时对样式的末尾加上自定义属性这样就完成了样式的私有化。
比如:
二、scoped为什么没有成功隔离
既然scoped是通过生成特殊自定义属性的方式完成隔离的,那我们不妨看看二者的scoped自定义值是什么?
组件A:data-v-a83bd3b0
组件B:data-v-a83bd3b0
====================
可以发现二者的自定义属性居然是一样的,问题排查到这里大概就知道是什么原因了:因为二者生成了相同的key,因此作用在组件A上的样式直接覆盖到组件B上了。
====================
三、自定义属性的生成规则是什么?
问题排查到这里,其实差不多就已经是尾声啦,只要知道自定义属性的生成规则就可以水落石出。
通过对项目的分析,我们发现两个自定义属性所属的文件,其目录层级完全相同,所属的文件名也是一样的。
因此我们开始对两个项目进行分别打包,发现没做任何改动的情况下其自定义属性始终是一样的,但当我们修改了目录层级或者文件名,生成的自定义属性就发生了改变。
所以我们可以知道scoped生成的自定义属性和文件路径,文件名称有关
问题解决
因为其自定义属性冲突是由于相同的文件路径,文件名称导致的,因此我们对组件B的项目目录层级进行了更新,至此问题修复。
scoped bug彩蛋
看到这里的朋友可能也可以猜到这个bug彩蛋了,**scoped的生成逻辑比较粗糙如果同时引入两个独立打包的模块,这么巧名字,目录层级又相同那你写的时候就得小心了,最稳妥的方式还是在编辑阶段加上模块的概念,减少重复概率。 **