彻底拆解 Vue scoped 指令：从编译原理到工程实践的全链路解析
引言
我们在开发 Vue 项目时，经常会给 <style> 标签加上 scoped 特性来实现组件的样式隔离。但它究竟是如何做到这一点的呢？作为开发者，我们不仅要会用这个特性，更要深入了解其底层原理。只有这样，在实际开发中才能避开各种潜在的陷阱，提升解决问题的效率。接下来，我们就来彻底剖析一下 Vue 的 scoped 指令，看看它到底是如何实现样式隔离的。
css编译
当 <style> 标签带有 scoped 属性时，其 CSS 样式仅作用于当前组件内的元素，这一特性与 Shadow DOM 的样式封装机制颇为相似。在 Vue 框架的底层实现中，会借助 vue-loader 对模板进行编译。这里需要特别提及作为前端开发者广泛熟悉的工具 —— postcss 库 ，vue-loader 的底层正是通过该库实现对 CSS 的处理与优化。它会将以下代码:
<style scoped>
.example {color: red;
}
</style><template><div class="example">hi</div>
</template>转换成:
<style>
.example[data-v-f3f3eg9] {color: red;
}
</style><template><div class="example" data-v-f3f3eg9>hi</div>
</template>vue-loader会对他进行这两步处理
1. DOM 元素标记
Vue 编译器会为组件的每个 DOM 节点添加唯一的数据属性（如
data-v-f3f3eg9），该哈希值基于组件路径和内容生成，确保全局唯一性。2. CSS 选择器转换
Vue 会将所有 CSS 选择器转换为属性选择器，确保样式仅作用于带特定标记的元素
样式隔离
属性选择器
属性选择器是 CSS 中一种强大的元素定位工具，它允许开发者根据元素的属性名或属性值来选中目标元素，就像通过「键值对」精准筛选对象属性一样。能与 HTML5 自定义数据属性（如
data-*）结合，实现更灵活的样式控制。
/* 存在 title 属性的 <a> 元素 */
a[title] {color: purple;
}/* 存在 href 属性并且属性值匹配"https://example.org"的 <a> 元素 */
a[href="https://example.org"]
{color: green;
}/* 存在 href 属性并且属性值包含"example"的 <a> 元素 */
a[href*="example"] {font-size: 2em;
}/* 存在 href 属性并且属性值结尾是".org"的 <a> 元素 */
a[href$=".org"] {font-style: italic;
}/* 存在 class 属性并且属性值包含单词"logo"的<a>元素 */
a[class~="logo"] {padding: 2px;
}Vue 的 scoped 特性通过为 DOM 元素添加唯一的哈希属性（例如 data-v-2311c06a），结合 vue-loader 的编译处理，将 CSS 规则转换为带属性选择器的形式，从而实现样式的局部作用域隔离。
注意！！！ 虽然 <style scoped> 可以实现样式隔离，但当父组件引用子组件时，父组件的样式会默认作用于子组件模板的根元素。我们可以结合 Vue 官方文档的相关内容，深入理解其原理和应对方法。
原文连接:单文件组件 CSS 功能 | Vue.js
权重影响
在日常开发中，我们经常需要编写CSS样式，但难免会遇到样式重复的情况。例如：同一个元素可能同时被类选择器、标签选择器、ID选择器和嵌套的SASS/LESS选择器定义样式。这时浏览器会优先采用哪个样式进行渲染呢？这就是我们需要掌握的CSS权重规则。
权重的四个等级
CSS 权重由四个等级组成，从高到低分别为：
- 内联样式（Inline Style）：直接写在 HTML 标签中的
style属性，权重为1000。- ID 选择器（ID Selectors）：如
#header，权重为100。- 类 / 属性 / 伪类选择器（Class/Attribute/Pseudo-class）：如
.btn、[type="text"]、:hover，权重为10。- 元素 / 伪元素选择器（Element/Pseudo-element）：如
div、::before，权重为1。- 通配符（Universal Selector）：如
*、::slotted()，权重为0。
例如
/* 权重：100（ID 选择器） */
#nav { color: red; }/* 权重：10（类选择器） */
.active { color: blue; }/* 权重：1（元素选择器） */
div { color: green; }/* 权重：10 + 1 = 11（类 + 元素） */
.list li { color: purple; }浏览器在渲染DOM元素时，会计算每个元素的样式权重，并选取最高权重的样式进行最终渲染。
为什么说scoped会影响CSS权重呢？原因如下
/* 原始样式（权重 10） */
.title { color: red; }/* 编译后（权重 10 + 10 = 20） */
.title[data-v-2311c06a] { color: red; }原始代码是通过类名来定义样式，但经过编译后，类名会与属性名合并，导致样式权重从原来的10增加到了20。
样式穿透
虽然我们设置了 scoped 来隔离样式，但如果仍需修改子组件的样式，尤其是三方组件库（如 ElementUI）的样式，该如何处理呢？以下是几种常见的方法：
1.深度选择器
使用穿透选择器可以强制样式穿透 scoped 隔离，影响子组件。不同预处理器的语法不同：
css
/* Vue 3 + CSS */
:deep(.el-button) {/* 修改 ElementUI 按钮样式 */border-radius: 4px;
}/* Sass/Less */
::v-deep(.el-button) {/* 样式 */
}/* 旧版 Vue 2 */
/deep/ .el-button {/* 样式 */
}
2. 全局样式覆盖
在全局 CSS 文件（如 styles/global.css）中直接覆盖组件样式：
/* 全局样式文件 */
.el-button {border-radius: 4px !important;
}
注意：使用 !important 需谨慎，可能导致优先级问题。