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