踩坑日记 神奇的scoped bug

前言

作为前端开发,在使用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的生成逻辑比较粗糙如果同时引入两个独立打包的模块,这么巧名字,目录层级又相同那你写的时候就得小心了,最稳妥的方式还是在编辑阶段加上模块的概念,减少重复概率。 **

相关推荐
℘团子এ几秒前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z6 分钟前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
星星会笑滴10 分钟前
vue+node+Express+xlsx+emements-plus实现导入excel,并且将数据保存到数据库
vue.js·excel·express
彭世瑜30 分钟前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund40431 分钟前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
Backstroke fish31 分钟前
Token刷新机制
前端·javascript·vue.js·typescript·vue
小五Five33 分钟前
TypeScript项目中Axios的封装
开发语言·前端·javascript
小曲程序33 分钟前
vue3 封装request请求
java·前端·typescript·vue
临枫54133 分钟前
Nuxt3封装网络请求 useFetch & $fetch
前端·javascript·vue.js·typescript
RAY_CHEN.34 分钟前
vue3 pinia 中actions修改状态不生效
vue.js·typescript·npm