vue中scoped原理

scoped

在vue組件中的style標(biāo)簽上有一個特殊屬性“scoped”

作用

當(dāng)一個style標(biāo)簽擁有scoped屬性時，它的css樣式就只能作用于當(dāng)前的組件，通過該屬性，可以使組件之間的樣式不互相污染。

 原理

1. 為組件實例生成一個唯一標(biāo)識，給組件中的每個標(biāo)簽對應(yīng)的dom元素添加一個標(biāo)簽屬性：data-v-xxxx。
   (在編譯 Vue 單文件組件時，vue-loader 會為每個組件生成一個唯一的哈希值作為組件樣式的標(biāo)識符，這個哈希值由 data-v- 前綴和一串隨機(jī)字符串組成）

2. 當(dāng)一個組件被渲染時，Vue 會將該組件的哈希值作為選擇器的一部分，從而保證組件樣式的唯一性。給<style scoped>中的每個選擇器的最后一個選擇器加上屬性選擇器，如：原選擇器為.container .box，則更改后選擇器為.container .box[data-v-xxxx]

示例

轉(zhuǎn)譯前的vue代碼

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

轉(zhuǎn)譯后：

<template>
    <div class="example" data-v-49729759>hello world</div>
</template>
<style scoped>
.example[data-v-49729759] {
    color: red;
}
</style>
?
限定樣式的作用范圍只在當(dāng)前組件內(nèi)部。
總之，scoped 特性的實現(xiàn)原理是通過為每個組件生成一個唯一的哈希值，并將該哈希值注入到選擇器中，從而保證了組件樣式的私有化

樣式穿透原理

為什么需要穿透scoped？

引用了第三方組件后，需要在組件中局部修改第三方組件的樣式，而又不想去除scoped屬性造成組件之間的樣式污染。此時只能通過特殊的方式，穿透scoped。

樣式穿透的寫法有三種：>>>、/deep/、::v-deep

1.如果項目使用的是css原生樣式，可以之間使用>>>穿透修改

2.less使用/deep/

3.sass使用::v-deep

原理

scoped后選擇器最后默認(rèn)會加上當(dāng)前組件的一個標(biāo)識，比如[data-v-0ade2e2c]用了樣式穿透后，在deep之后的選擇器最后就不會加上標(biāo)識。