踩坑日记 神奇的scoped bug

128 阅读4分钟

前言

作为前端开发,在使用vue的过程中,应该经常会遇到scoped的使用,那各位有没有想过scoped是如何影响页面的呢,又是如何保障样式不被污染的呢,在什么特殊情况下会出现scoped的bug彩蛋呢?

bug介绍

前情提要

在聊这个问题之前我们先介绍一种代码组织方式————微组件,很简单就是将组件直接打包成js文件,然后在页面中进行引入使用。

这个bug出现的时候我们就使用微组件来引入了两个组件,这里简称为组件A,组件B

组件A和组件B的功能完全不一样,但是其目录结构都类似,入口都是index.vue文件,里面都引入了公共的button组件

A组件和B组件定义了自己的css模块,并通过scoped进行了包裹, 其中A组件通过deep操作了公共的button组件的样式。

错误表现

下图都并非真实,均为演示所需构造的图

在页面上展示的时候我们惊奇的发现,B组件的按钮都变得很短

image.png

但是实际上当我们单独运行组件B时长度会更长些,很明显组件B被影响了

image.png

bug排查

既然bug出现了,那我们就想办法排查
我们发现控制台中组件B出现了两个特殊的样式:

image.png

错误代码定位

  • 它们俩就是问题的根源,但是奇怪的是这个样式并没出现在组件B的代码中,同时我们排查主工程(引入组件A和组件B的项目),也没发现这两个样式的踪迹。

  • 我们这里就开始考虑是不是其他微组件导致的,于是我们开始逐个禁用微组件,查看是否出现异常,终于在组件A中发现了这个代码的存在。

    image.png

错误原因定位

组件A和组件B的css模块都使用了scoped做隔离,而且二者的位置都是同级的,按理说不会相互影响

遇到理解不了的问题,这时候就要从原理层面去进行剖析:

一、scoped是如何完成样式隔离的?

不妨回顾一下scoped是通过什么方式实现的css样式隔离:

vue的scoped会给当前文件的template中所有dom节点都加上特殊的自定义属性,这点就类似于生成了hash,然后在编译其css模块时对样式的末尾加上自定义属性这样就完成了样式的私有化。
比如:
image.png

二、scoped为什么没有成功隔离

既然scoped是通过生成特殊自定义属性的方式完成隔离的,那我们不妨看看二者的scoped自定义值是什么?

组件A:data-v-a83bd3b0

image.png

组件B:data-v-a83bd3b0

image.png

====================

可以发现二者的自定义属性居然是一样的,问题排查到这里大概就知道是什么原因了:因为二者生成了相同的key,因此作用在组件A上的样式直接覆盖到组件B上了。

====================

三、自定义属性的生成规则是什么?

问题排查到这里,其实差不多就已经是尾声啦,只要知道自定义属性的生成规则就可以水落石出。

通过对项目的分析,我们发现两个自定义属性所属的文件,其目录层级完全相同,所属的文件名也是一样的

因此我们开始对两个项目进行分别打包,发现没做任何改动的情况下其自定义属性始终是一样的,但当我们修改了目录层级或者文件名,生成的自定义属性就发生了改变。

所以我们可以知道scoped生成的自定义属性和文件路径,文件名称有关

问题解决

因为其自定义属性冲突是由于相同的文件路径,文件名称导致的,因此我们对组件B的项目目录层级进行了更新,至此问题修复。

scoped bug彩蛋

看到这里的朋友可能也可以猜到这个bug彩蛋了,**scoped的生成逻辑比较粗糙如果同时引入两个独立打包的模块,这么巧名字,目录层级又相同那你写的时候就得小心了,最稳妥的方式还是在编辑阶段加上模块的概念,减少重复概率。 **