vue 中的scoped原理

scoped作用

在vue文件中的style标签上加上scoped属性，则style标签下的样式只能在本组件中使用。
如果每一个vue组件的style标签都加上了scoped，那就实现了样式的模块化。

scoped原理

代码样例展示：

<template>
<div class='demo'>scoped展示</div>
</template>
<style scoped>
	.demo{
	color:'red'
}
</style>

转译之后

<template>
<div class='demo' data-v-xxxx>scoped展示</div>
</template>
<style scoped>
	.demo[data-v-xxxx]{
	color:'red'
}
</style>

vue中的scoped属性的实现主要是通过postcss实现。

主要的变化是：

• 1，给html的dom节点添加一个不会重复的data属性，就是代码中的data-v-xxxx，来唯一的标识这个元素
• 2，在每句的css选择器的末尾，加上一个当前组件的data属性选择器来私有化样式

scoped穿透

在vue中我们需要引入第三方库时，可能在组件中，需要去修改第三方组件的样式，并且不想影响scoped中其他样式。

这是就可以使用特殊的方式进行穿透

sass和less的样式穿透，使用/deep/

外层样式 /deep/ 第三方组件样式 {
		样式内容
}
.demo /deep/ .swiper{
	color : red;
}

拓展流程

本质时：基于html和css属性选择器，即分别时给html标签和css选择器添加 data-v-xxx;
具体来说，是通过vue-loader 实现的，过程分为三步：

• 首先vue-loader会解析vue组件，提取数template,script,style对应的代码块。

• 然后构造组件实例，在组件实例的选项上面绑定scopedId

• 最后对style的css代码进行编译转化，应用scopedId生成选择器的属性

补充：vue-loader处理策略。