不同于 React 和 Angular，Vue 使用的 .vue 文件是一个自定义的文件类型，用类 HTML 语法描述一个 Vue 组件。每个 .vue 文件包含三种类型的顶级语言块 <template>、<script> 和 <style>，分别用于包含组件的 Html模板、JS实例定义 和 组件的样式；这使得 Vue 能轻松并正确无误地确定组件对应的样式规则；所以在样式隔离上，Vue 可以使用不同于 CSS Modules规范 的方案。本文主要讲解 Vue 的 Scoped CSS 和 深度作用选择器 的原理，以及其它的基于 Vue 的这种集合 Html模板、JS实例定义 和 组件的样式 的单文件组件场景下 样式隔离的实现方案。

目录

• 1. Scoped CSS的原理
  • 原理
  • 示例
  • 特点
• 2. 深度作用选择器(>>>、/deep/、::v-deep)的原理
• 3. 其它实现方案
  • 3.1. 方案1：增加能标识组件实例的父代选择器
  • 3.2. 方案2：给选择器的第一个选择器单元增加能标识组件实例的属性选择器

内容

1. Scoped CSS的原理

原理

Vue的作用域样式 Scoped CSS 的实现思路如下：

1. 为每个组件实例（注意：是组件的实例，不是组件类）生成一个能唯一标识组件实例的标识符，我称它为组件实例标识，简称实例标识，记作 InstanceID；
2. 给组件模板中的每一个标签对应的Dom元素（组件标签对应的Dom元素是该组件的根元素）添加一个标签属性，格式为 data-v-实例标识，示例：<div data-v-e0f690c0="" >；
3. 给组件的作用域样式 <style scoped> 的每一个选择器的最后一个选择器单元增加一个属性选择器 原选择器[data-v-实例标识] ，示例：假设原选择器为 .cls #id > div，则更改后的选择器为 .cls #id > div[data-v-e0f690c0]；

示例

父组件：Parent.vue

<template>
  <div class="parent" id="app">
    <h1>我是父组件</h1>
    <div class="gby">
      <p>我是一个段落</p>
    </div>

    <child></child>
  </div>
</template>

<style scoped>
  .parent {
    background-color: green;
  }

  .gby p {
    background-color: red;
  }
</style>

子组件：Child.vue

<template>
    <div class="child">
        <h1>我是子组件</h1>
        <div class="dyx">
            <p>我是子组件的段落</p>
        </div>
    </div>
</template>

<style scoped>
    .child .dyx p {
        background-color: blue;
    }
</style>

转换后，相当于

父组件：Parent.vue

<template>
  <div class="parent" id="app" data-v-e0f690c0="" >
    <h1 data-v-e0f690c0="" >我是父组件</h1>
    <div class="gby" data-v-e0f690c0="" >
      <p data-v-e0f690c0="" >我是一个段落</p>
    </div>

    <child data-v-e0f690c0="" ></child>
  </div>
</template>

<style scoped>
  .parent[data-v-e0f690c0] {
    background-color: green;
  }

  .gby p[data-v-e0f690c0] {
    background-color: red;
  }
</style>

子组件：Child.vue

<template>
    <div class="child" data-v-32d296d4="" >
        <h1 data-v-32d296d4="" >我是子组件</h1>
        <div class="dyx" data-v-32d296d4="" >
            <p data-v-32d296d4="" >我是子组件的段落</p>
        </div>
    </div>
</template>

<style scoped>
    .child .dyx p[data-v-32d296d4] {
        background-color: blue;
    }
</style>

生成的Dom树如下

示例dom

特点

1. 将组件的样式的作用范围限制在了组件自身的标签，即：组件内部，包含子组件的根标签，但不包含子组件的除根标签之外的其它标签；所以 组件的css选择器也不能选择到子组件及后代组件的中的元素（子组件的根元素除外）；

   因为它给选择器的最后一个选择器单元增加了属性选择器 [data-v-实例标识] ，而该属性选择器只能选中当前组件模板中的标签；而对于子组件，只有根元素 即有 能代表子组件的标签属性 data-v-子实例标识，又有能代表当前组件（父组件）的 签属性 data-v-父实例标识，子组件的其它非根元素，仅有能代表子组件的标签属性 data-v-子实例标识；

2. 如果递归组件有后代选择器，则该选择器会打破特性1中所说的子组件限制，从而选中递归子组件的中元素；

   原因：假设递归组件A的作用域样式中有选择器有后代选择器 div p ，则在每次递归中都会为本次递归创建新的组件实例，同时也会为该实例生成对应的选择器 div p[data-v-当前递归组件实例的实例标识]，对于递归组件的除了第一个递归实例之外的所有递归实例来说，虽然 div p[data-v-当前递归组件实例的实例标识] 不会选中子组件实例（递归子组件的实例）中的 p 元素（具体原因已在特性1中讲解），但是它会选中当前组件实例中所有的 p 元素，因为 父组件实例（递归父组件的实例）中有匹配的 div 元素；

2. 深度作用选择器(>>>、/deep/、::v-deep)的原理

如果你希望 scoped 样式中的一个选择器能够选择到子组 或 后代组件中的元素，我们可以使用 深度作用选择器，它有三种写法：

• >>>，示例： .gby div >>> #dyx p
• /deep/，示例： .gby div /deep/ #dyx p 或 .gby div/deep/ #dyx p
• ::v-deep，示例： .gby div::v-deep #dyx p 或 .gby div::v-deep #dyx p

它的原理与 Scoped CSS 的原理基本一样，只是第3步有些不同（前2步一样），具体如下：

1. 为每个组件实例（注意：是组件的实例，不是组件类）生成一个能唯一标识组件的标识符，我称它为实例标识，记作 InstanceID；
2. 给组件模板中的每一个标签对应的Dom元素（组件标签对应的Dom元素是该组件的根元素）添加一个标签属性，格式为 data-v-实例标识，示例：<div data-v-e0f690c0="" >；
3. 给组件的作用域样式 <style scoped> 的每一个深度作用选择器前面的一个选择器单元增加一个属性选择器[data-v-实例标识] ，示例：假设原选择器为 .cls #id >>> div，则更改后的选择器为 .cls #id[data-v-e0f690c0] div；

因为Vue不会为深度作用选择器后面的选择器单元增加 属性选择器[data-v-实例标识]，所以，后面的选择器单元能够选择到子组件及后代组件中的元素；

3. 其它实现方案

本文原文的标题是《单文件组件实现样式隔离实现方案与设计》，虽然现在改名并重新编排了，但仍保留了原文中其它的实现方案，原因如下；

• 让读者了解其它的实现方案；
• 对比下其它方案的特点，从而让读者明白Vue为什么选择 Scoped CSS 方案；

3.1. 方案1：增加能标识组件实例的父代选择器

思路：

1. 为每个组件实例（注意：是组件的实例，不是组件类）生成一个能唯一标识组件实例的标识符，我称它为组件实例标识，简称实例标识，记作 InstanceID；
2. 给组件的根元素增加一个能唯一代表组件的标识，如：给组件增加一个以组件实例标识命名的CSS类 或 标签属性；
3. 给每个组件的所有CSS选择器都加一个的父代选择器，生成的新选择的格式为 父代选择器 原选择器；这样就使得原选择器的作用范围都被限制在了组件根元素的后代范围中。

父代选择器 可使用能唯一标识组件的 类选择器 或 属性选择器 来实现，比如：原选择器是 .gby div，增加父代选择器后是 [data-组件实例ID] .gby div；

特点：

• 将样式的作用范围限制在了组件内部，即：样式能作用到组件自身及子组件中的元素；所以 组件的css样式选择器能选择到子组件及后代组件的中的元素；

3.2. 方案2：给选择器的第一个选择器单元增加能标识组件实例的属性选择器

这个方案的思路跟 Vue 的 Scoped CSS的原理基本一样，只是第3步中的 属性选择器 [data-v-实例标识]加在了选择器中的第一个选择器单元上，而不是最后一个选择器单元；
思路：

1. 为每个组件实例（注意：是组件的实例，不是组件类）生成一个能唯一标识组件实例的标识符，我称它为组件实例标识，简称实例标识，记作 InstanceID；
2. 给组件模板中的每一个标签对应的Dom元素（组件标签对应的Dom元素是该组件的根元素）添加一个标签属性，格式为 data-v-实例标识，示例：<div data-v-e0f690c0="" >；
3. 给组件的作用域样式 <style scoped> 的每一个选择器的第一个选择器单元增加一个属性选择器 [data-v-实例标识] ，示例：假设原选择器为 .cls #id > div，则更改后的选择器为 .cls[data-v-e0f690c0] #id > div；

特点：

• 将样式的作用范围限制在了组件内部，即：样式能作用到组件自身及子组件中的元素；所以组件的css样式选择器能选择到子组件及后代组件的中的元素；