vue 的 scoped 样式通过给组件元素添加唯一属性并重写样式规则来实现隔离。具体步骤为：1. 给组件所有 dom 元素添加唯一标识属性，如 data-v-f3f3eg9；2. 将样式规则重写为带属性选择器的形式，如 .red[data-v-f3f3eg9]；3. 使样式仅作用于带相同属性的元素。scoped 并非完全隔离，存在三种例外情况：1. 子组件继承父组件样式；2. 未使用深度选择器修改子组件样式；3. 全局类名可能造成冲突。与 module 的区别在于：1. scoped 使用属性选择器实现伪作用域；2. module 将类名映射为唯一变量名并需通过 $style 调用，更安全但写法繁琐。实际开发建议：1. 独立组件优先用 scoped；2. 修改第三方组件样式时加 ::v-deep 或 :deep()；3. 配合 bem 命名减少冲突；4. 复杂项目考虑使用 module。
Vue 的 scoped 样式之所以能实现组件之间的样式隔离，核心在于 Vue 编译器在构建时自动给组件的 DOM 元素添加了一个唯一的属性名，并在样式中通过属性选择器来限定样式的生效范围。
scoped 是怎么工作的？
当你在一个 Vue 单文件组件中写 style 标签并加上 scoped 属性时，Vue 会做几件事：
- 给当前组件的所有 DOM 元素添加一个唯一标识属性，比如：
data-v-f3f3eg9 - 同时把你的样式规则也进行重写，加上这个属性选择器
例如你写了这样一条样式：
立即学习“前端免费学习笔记（深入）”；
.red {
color: red;
}编译后会被转换成类似：
.red[data-v-f3f3eg9] {
color: red;
}而组件内的每个元素也会带上这个属性：
<span data-v-f3f3eg9>红色文字</span>
这样浏览器只会把带相同属性的样式应用到对应的元素上，从而实现了“样式只作用于当前组件”的效果。
scoped 能完全隔离样式吗？
虽然 scoped 做了属性绑定处理，但有几种情况还是可能“漏掉”：
-
子组件继承父组件样式（尤其是使用了
inherit的属性，如color、font-size） -
深度选择器未使用：如果你在 scoped 样式里想修改子组件的样式，需要使用
::v-deep或:deep()来穿透作用域 -
全局样式冲突：如果用了全局 CSS 类名，比如
.btn，又在 scoped 中定义了同名类，可能会互相干扰
所以 scoped 并不是绝对隔离，而是“尽力而为”的局部作用域。
scoped 和 module 的区别
除了 scoped，Vue 还支持用 module 来控制样式作用域，它的原理不同：
-
scoped是靠属性选择器实现的“伪作用域” -
module是将类名映射成唯一变量名，比如.red可能变成_red_123
使用方式也不一样：
<style module>
.red {
color: red;
}
</style>然后在模板中通过 $style 使用：
<div :class="$style.red">红色文本</div>
这种方式更安全，但写法略显繁琐，适合对样式隔离要求更高的项目。
实际开发中的建议
- 如果是独立组件、不想影响其他地方，优先使用
scoped - 需要修改第三方组件样式时，记得加
::v-deep或:deep() - 想避免命名冲突，可以配合 BEM 命名规范来写类名，比如
.btn-primary - 对特别复杂的项目，考虑用
module替代scoped，获得更强的样式控制能力
基本上就这些。scoped 看似简单，但背后其实有不少细节，理解它的工作机制有助于写出更健壮的组件样式。
