深入探索VueJS Scoped CSS 实现原理

下面是深入探索VueJS Scoped CSS实现原理的攻略：

前言

在Vue.js中，我们通过<style>标签来声明组件的样式，但是为了避免样式的污染（即样式影响到了其他组件），Vue.js提供了Scoped CSS（作用域CSS）的支持。

Scoped CSS是指将组件的样式限制在组件内部，不影响其他组件的样式，并且保证组件内部的样式可以覆盖全局样式。

实现原理

Vue.js的Scoped CSS主要通过给组件标签内部的元素/属性添加独特的标识，从而实现样式作用域的限制。

具体来说，Vue.js将每个组件编译成一个渲染函数，并且给渲染函数内部的元素 / 属性添加如下两个属性：

data-v-[hash]：唯一标识符，也称为命名空间标识符。[hash]是一个随机字符串，用来保证每个组件的标识符都是唯一的。
data-v-[hash]:[style-id]：样式标识符，也称为类名。[style-id]是一个自增的数字，用来标识组件内不同的样式。

这样，我们就可以使用CSS选择器来指定组件内的特定元素/属性，并保证样式只作用于该组件内部。

示例说明

示例1：单文件组件中的Scoped CSS

假设我们有一个单文件组件MyComponent.vue：

<template>
  <div class="wrapper">
    <h1>{{ msg }}</h1>
    <p class="content">{{ content }}</p>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  data () {
    return {
      msg: 'Hello, World!',
      content: 'This is my content'
    }
  }
}
</script>

<style scoped>
.wrapper {
  border: 1px solid red;
}

h1 {
  font-size: 24px;
}

.content {
  font-size: 18px;
  color: blue;
}
</style>

在编译后，上述代码会被转换成以下代码：

<template>
  <div data-v-23e2c4d7 class="wrapper">
    <h1 data-v-23e2c4d7:data-v-1ec20eed> {{ msg }} </h1>
    <p data-v-23e2c4d7:data-v-2bb80a89 class="content"> {{ content }} </p>
  </div>
</template>

<script>
...
</script>

<style>
[data-v-23e2c4d7] .wrapper {
  border: 1px solid red;
}

[data-v-23e2c4d7] h1[data-v-1ec20eed] {
  font-size: 24px;
}

[data-v-23e2c4d7] .content[data-v-2bb80a89] {
  font-size: 18px;
  color: blue;
}
</style>

可以看到，每个元素/属性都被加上了data-v-[hash]和data-v-[hash]:[style-id]两个属性。同时，我们在样式表中使用了选择器[data-v-[hash]]和[data-v-[hash]] [data-v-[hash]:[style-id]]来限制样式只作用于组件内部。

示例2：在组合组件中使用Scoped CSS

假设我们有两个组件Parent.vue和Child.vue，其中Parent.vue包含一个Child.vue组件，并且为Child.vue添加了Scoped CSS。

Parent.vue

<template>
  <div class="wrapper">
    <Child />
  </div>
</template>

<script>
import Child from './Child'

export default {
  name: 'Parent',
  components: {
    Child
  }
}
</script>

<style scoped>
.wrapper {
  border: 1px solid red;
}
</style>

Child.vue

<template>
  <div class="content">
    <p>{{ msg }}</p>
  </div>
</template>

<script>
export default {
  name: 'Child',
  data () {
    return {
      msg: 'I am child'
    }
  }
}
</script>

<style scoped>
.content {
  font-size: 18px;
  color: blue;
}
</style>

在编译后，我们可以看到编译结果如下：

Parent.vue

<template>
  <div data-v-4b869cfc class="wrapper">
    <Child data-v-4b869cfc></Child>
  </div>
</template>

<script>
import Child from './Child'

export default {
  name: 'Parent',
  components: {
    Child
  }
}
</script>

<style>
[data-v-4b869cfc] .wrapper {
  border: 1px solid red;
}
</style>

Child.vue

<template>
  <div data-v-7c24a973 class="content">
    <p data-v-7c24a973>{{ msg }}</p>
  </div>
</template>

<script>
export default {
  name: 'Child',
  data () {
    return {
      msg: 'I am child'
    }
  }
}
</script>

<style>
[data-v-7c24a973] .content {
  font-size: 18px;
  color: blue;
}
</style>

可以看到，Parent.vue和Child.vue组件都拥有各自的唯一标识符data-v-[hash]，并且它们之间是相互独立的。因此，当我们在Child.vue中使用.content样式时，只会作用于Child.vue组件，不会影响Parent.vue组件。