Vue 的 Scoped 样式，本质上是在组件编译阶段，给每个元素打上一个类似“身份证”的唯一属性（比如 data-v-f3f3eg9），然后把 CSS 选择器悄悄改写，变成 .className[data-v-f3f3eg9] 的形式。这样一来，样式就老老实实地作用在当前组件内，不会到处“惹事”。

但也别把它想得太完美，全局选择器该穿透还是穿透，碰上动态内容（比如 v-html 渲染的片段）或者第三方组件插槽里的内容，还是得靠 :deep() 这类穿透手段额外处理。

先说说单文件组件的骨架：