概述

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