探秘Vue单文件组件中style中的scoped作用原理

简介

作为一名前端开发工程师，特别是用Vue进行开发的工程师而言相信对scoped都特别的熟悉，但是大家有没有想过、或者思考过scoped的原理到底是什么，我们为什么要给单文件组件的style标签加上scoped，这篇文章就和大家一起来探讨一下为什么要加scoped，以及scoped作用原理。

为什么要加scoped

众所周知前端的css样式有一个很大的特性，就是可以重叠覆盖，这也是起名叫’‘层叠样式表’'的主要原因吧，Vue的原理是单文件组件，下面给大家介绍一下何为单文件组件。
单文件组件的目的就是项目组件化，提高组件的复用性，单个组件的样式，属性都是封闭的，不会收到其他组件影响，但是在书写css的时候难免会出现class名重复，样式会互相影响，破环组件耦合性、所有增加scoped的主要目的就是将css样式进行隔离，避免组件之间相互污染。

scoped的作用原理

当我们打开调试器会发现所有添加scoped的组件类名后面都会有一个，data-xxxx的值，并且不会重复。

<div class='test' data-v-4f795181>hillo!</div>

或者我们可以直接把我们的.vue文件，利用postcss直接进行转换，下面就是我转换前后的对比。
转换前：

<templete>
	<div class='test'>你哈爬到啊!</div>
</templete>
<style scoped>
	.test{color:red;}
</style>

转换后：

<templete>
	<div class='test' data-v-4f795181>hillo!</div>
</templete>
<style scoped>
	.test[data-v-4f795181]{color:red;}
</style>

不了解postcss的同学可以去官网看看，这是来官网的来链接

postcss官网文档使用教程

得出结论

scoped 属性是一个布尔属性。 如果使用该属性，则样式仅仅应用到 style 元素的父元素及其子元素。并且会给对应的样式表增加一个唯一类似于这样的标识

.test[data-v-4f795181]{color:red;}

从而保证样式不会发生冲突，覆盖，但是在日常工作中我们常常需要进行样式穿透比如：修改elementUI的默认样式，自定义部分组件的样式，我们应该如何去做。

样式穿透

如何自定义组件样式，做样式穿透我们常用的主要有两中方式，之前有文章写过，大家感兴趣可以移步查看
自定义elementUI样式，实现scoped穿透的方式