在了解 <style scoped></style> 前先回顾vue实例的挂载和渲染流程：
image.png
其中template模板在运行时进行编译，它会利用Vue内部的编译器进行模板的编译，字符串模板会转换为抽象的语法树，即AST树(抽象语法树)
vue-loader
在vue 的项目中，整个项目是通过 .vue 单文件组件组织的，我们写的单文件组件都被处理为了SFC对象(单个文件组件), 即包含了单个HTML模块, 单个脚本模块, 一个或多个样式模块的功能完备的结构单元
vue-loader 的存在我们才得以组件化的形式进行编码，使vue 组件里的 style、template、script分别会编译为相应的 style 标签、html 标签以及 script 标签引入。
下面是一个简单的 vue 组件例子：
<template>
<div class="App">
{{ msg }}
<ParentA></ParentA>
<ParentB></ParentB>
</div>
</template>
<style>
.App {
color: #000;
}
</style>
// --- ParentA
<template>
<div class="ParentA">
{{ msg }}
</div>
</template>
<style>
.ParentA {
color: red;
}
</style>
// --- ParentB
<template>
<div class="ParentA">{{ msg }}</div>
</template>
<style>
.ParentB {
color: blue;
}
</style>
它通过 vue-loader 进行编译后，在浏览器中是这样显示的：
<head>
<style type="text/css">
.ParentA {
color: red;
}
</style>
</head>
<body>
<div class="ParentA"> ParentA </div>
<div class="ParentA">ParentB</div>
</body>
可以看出 ParentA.vue 组件对.ParentA 类的样式更改是会污染到全局样式的，也就是说会影响到 ParentB.vue 组件样式，一个项目中，不同的人的开发会导致两个不同的组件中使用了相同的类名，从而互相之间产生影响，vue-loader 给我们提供了 scoped 属性，从编码上解决了这个问题。
给 ParentA.vue 的 style 标签添加上 scoped 属性，这时候编译输出的是：
<style type="text/css">
.ParentA[data-v-183fa219] {
color: red;
}
</style>
<div data-v-183fa219 class="ParentA"> ParentA</div>
<div class="ParentA">ParentB</div>
可以看到输出的 ParentA.vue 的 style 标签内多了一个属性选择器，并且 html 标签上也多了对应的 data-v-183fa219 属性值。这样的话，无论 .ParentA 的样式怎么变都不会影响到 ParentB 的样式了，即使它们使用了同一个类名，这就是所谓的作用域约束。
scoped 原理
1.编译过程中Webpack通过调用Vue Loader，单文件组件都被处理为了SFC对象
2.判断当前SFC对象样式块中是否有scoped属性
3.有的话，给组件HTML模板添加自定义属性 (Attribute) data-v-x, 以及给组件内CSS选择器添加对应的属性选择器 (Attribute Selector) [data-v-x], 达到组件内样式只能生效与组件内HTML的效果, 代码效果如下:
<style>
.example[data-v-f3f3eg9] {
color: red;
}
</style>
<template>
<div class="example" data-v-f3f3eg9>hi</div>
</template>
4. stylePostLoader 在对样式模板进行解析过程中，对含 scoped 标记的模板引入插件 stylePlugins/scoped.js, scoped.js 将[data-v-x], 添加到选择器末尾，所以有scoped 的style模版编译后，会携带一个[data-v-x]属性选择器，只对对应的html模板生效，即起到了‘使样式变得私有’的作用
5.在第四步的过程中，如果出现深度作用选择器，那么就不会将[data-v-x],添加到选择器末尾，所以可以用深度选择器来覆盖带有scoped的组件的样式：
image.png
网友评论