vue编译时对采用“标识注入+选择器重写”：为组件生成唯一data-v-哈希标识，注入模板元素；重写css选择器为.class[data-v-xxx]形式实现样式隔离，::v-deep等语法可穿透作用域。
Vue 在编译阶段对 <style scoped></style> 的处理，核心是“标识注入 + 选择器重写”，不依赖 Shadow DOM，而是通过静态分析和属性标记实现样式作用域隔离。
生成唯一组件标识符
每个带有 scoped 的单文件组件（SFC）在编译时会被分配一个唯一哈希值，例如 data-v-f3f3eg9 或 data-v-1a2b3c4d。该标识由组件内容（如模板、样式、脚本）的哈希计算得出，确保内容不变时标识稳定，便于缓存和 HMR。
为模板元素批量添加属性
编译器遍历组件模板 AST，向根元素及其所有**静态子元素**（不含 v-html 渲染的内容）自动注入该标识属性：
- 原始模板：
<div class="card"><p class="title">Hello</p></div> - 编译后 DOM：
<div class="card" data-v-f3f3eg9><p class="title" data-v-f3f3eg9>Hello</p></div>
重写 CSS 选择器匹配逻辑
编译器解析 <style scoped></style> 中的每条规则，在原有选择器末尾追加属性选择器，确保仅匹配带该标识的元素：
- 原始样式：
.card { padding: 16px; }→ 编译后：.card[data-v-f3f3eg9] { padding: 16px; } - 复合选择器：
.card .title→ 编译后：.card[data-v-f3f3eg9] .title[data-v-f3f3eg9] -
:hover、::before等伪类/伪元素也一并带上属性条件
深度选择器的特殊转换
当需要穿透作用域影响子组件时，Vue 支持 ::v-deep、/deep/（已弃用但兼容）、>>> 等语法。编译器会将其剥离，并保留父组件标识，使选择器链中仅目标子选择器脱离作用域限制：
- 原始写法：
::v-deep .el-input__inner { border-color: #2a8c5e; } - 编译后：
.parent-class[data-v-f3f3eg9] .el-input__inner { border-color: #2a8c5e; }
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
