Vue中的scoped實現原理

何為scoped？

在vue文件中的style標簽上，有一個特殊的屬性：scoped。當一個style標簽擁有scoped屬性時，它的CSS樣式就只能作用於當前的組件，也就是說，該樣式只能適用於當前組件元素。通過該屬性，可以使得組件之間的樣式不互相污染。如果一個項目中的所有style標簽全部加上了scoped，相當於實現了樣式的模塊化。

scoped的實現原理

vue中的scoped屬性的效果主要通過PostCSS轉譯實現，如下是轉譯前的vue代碼：

<style scoped>
.example {
 color: red;
}
</style>
<template>
 <div class="example">hi</div>
</template>

轉義后：

<style>
.example[data-v-5558831a] {
 color: red;
}
</style>
<template>
 <div class="example" data-v-5558831a>hi</div>
</template>

即：PostCSS給一個組件中的所有dom添加了一個獨一無二的動態屬性，然后，給CSS選擇器額外添加一個對應的屬性選擇器來選擇該組件中dom，這種做法使得樣式只作用於含有該屬性的dom——組件內部dom。