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

相关推荐
逐·風21 分钟前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫1 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦1 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子2 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山2 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享3 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
程序媛小果3 小时前
基于java+SpringBoot+Vue的旅游管理系统设计与实现
java·vue.js·spring boot
从兄3 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
凉辰4 小时前
设计模式 策略模式 场景Vue (技术提升)
vue.js·设计模式·策略模式
清灵xmf5 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询