概述
scoped的作用就是样式模块化（CSS Module），即给组件每一个元素（以及非动态添加的子组件的根元素）加上一个data-v-xxxx的属性，样式选择器也会格式化成选择器[data-v-xxxx],这样就做到了样式隔离，每个组件内定义的样式只对该组件生效，避免了不同组件或页面的样式（选择器）冲突。本文将以vue3为例，深入了解scoped原理。
scoped实践
vue3组件是如下定义样式：
<template>
<div class="header">
<span>标绘管理</span>
</div>
</template>
<style scoped>
.header span {
position: relative;
margin-left: 54px;
font-size: 16px;
display: inline-flex;
height: 24px;
line-height: 24px;
font-family: "Microsoft YaHei";
font-weight: bold;
color: #303133;
}
</style>
- 效果如下：
scoped源码分析
compiler-sfc模块
vue3中有个模块@vue/compiler-sfc,这个模块是单独拎出来，不会被打包到vue.global.js。compiler-sfc主要作用就是用来编译单文件组件，就是.vue。因为scoped的实现是在compiler-sfc模块中，所以本文的所有的讨论也是基于SFC。
vite与plugin-vue
vue3如果是通过vite搭建的，那么compiler-sfc会通过vite的plugin-vue调用，这在script 标签的 setup 实现原理中有讲解,可以简短回顾。
Style 样式选择器中的处理
在 plugin-vue中会读取.vue组件，并识别<style></style>部分，如下
if (query.type === "style") {
return transformStyle(
code,
descriptor,
Number(query.index || 0),
options.value,
this,
filename
);
}
transformStyle函数会将<style></style>的 code 传给compiler.compileStyleAsync，并返回编译的结果，其中参数包含id和scoped。
-
id的生成id包含于descriptor中，其生成过程如下所示：
descriptor.id = getHash(normalizedPath + (isProduction ? source : "")); // normalizedPath:序列化文件路径后的字符串，如果是生产环境，还会加上源码
function getHash(text) {
return node_crypto
.createHash("sha256")
.update(text)
.digest("hex")
.substring(0