Vue scoped 样式作用域隔离的实现原理

Vue 的 scoped 样式通过为组件内的 CSS 添加唯一标识符，确保样式仅作用于当前组件，避免全局污染。其核心实现原理如下：

1. 编译阶段：唯一标识符注入

• 模板处理：
  当 Vue 编译单文件组件（.vue）时，如果检测到 <style scoped>，会为当前组件生成一个唯一的 data 属性（如 data-v-f3f3eg9）。

• 元素标记：
  该 data 属性会被自动添加到组件模板内的所有 HTML 元素上（不仅仅是根元素）。例如：

  <!-- 编译前 -->
  <div class="demo">Hello</div>
  
  <!-- 编译后 -->
  <div class="demo" data-v-f3f3eg9>Hello</div>
  

2. 样式重写：作用域隔离

• CSS 选择器转换：
  <style scoped> 内的 CSS 规则会被重写，附加唯一 data 属性选择器，确保样式仅作用于当前组件。例如：

  /* 编译前 */
  .demo {
    color: red;
  }
  
  /* 编译后 */
  .demo[data-v-f3f3eg9] {
    color: red;
  }
  

• 深层选择器例外：
  若需要穿透影响子组件样式，可使用 ::v-deep（Vue 2/3）或 :deep()（Vue 3），此时选择器不会被附加 data 属性：

  /* 编译前 */
  ::v-deep .child {
    color: blue;
  }
  
  /* 编译后 */
  [data-v-f3f3eg9] .child {
    color: blue;
  }
  

3. 实现工具链

• PostCSS 插件：
  Vue 通过 postcss-modules-scope 插件实现这一过程。该插件在构建阶段（如 Webpack、Vite）自动完成以下操作：
  1. 生成唯一 data 属性。
  2. 将 data 属性注入模板元素。
  3. 重写 CSS 选择器，附加 [data-v-xxxxx]。

4. Vue 3 的优化

在 Vue 3 中，scoped 的实现更加高效：

• 更短的哈希值：唯一标识符更简洁（如 data-v-xxxxx → data-v-123）。
• 性能优化：通过编译时静态分析，减少不必要的属性注入。

5. 注意事项

• 子组件根元素：
  父组件的 scoped 样式默认会影响子组件的根元素（方便父组件调整子组件布局），但不会影响子组件内部其他元素。
• 全局样式共存：
  若需全局样式，可单独使用 <style> 标签（不加 scoped）。
• 性能影响：
  大量使用 scoped 会增加 CSS 选择器长度，但现代浏览器对此优化较好，影响可忽略。

示例：完整编译流程

<!-- 编译前 -->
<template>
  <div class="container">
    <p class="text">Vue Scoped Style</p>
  </div>
</template>

<style scoped>
.container {
  padding: 20px;
}
.text {
  font-size: 16px;
}
</style>

<!-- 编译后 -->
<div class="container" data-v-f3f3eg9>
  <p class="text" data-v-f3f3eg9>Vue Scoped Style</p>
</div>

<style>
  .container[data-v-f3f3eg9] {
    padding: 20px;
  }
  .text[data-v-f3f3eg9] {
    font-size: 16px;
  }
</style>

通过这种机制，Vue 的 scoped 样式既保证了组件样式的独立性，又保留了灵活性（如穿透子组件根元素），是组件化开发的核心特性之一。