在vue組件中，為了使樣式私有化（模塊化），不對全局造成污染，可以在style標(biāo)簽上添加scoped屬性以表示它的只屬于當(dāng)下的模塊，這是一個非常好的舉措，但是為什么要慎用呢？因為在我們需要修改公共組件（三方庫或者項目定制的組件）的樣式的時候，scoped往往會造成更多的困難，需要增加額外的復(fù)雜度。

scoped實現(xiàn)私有化樣式的原理

為什么會說，會增加復(fù)雜度？那么我們先從的實現(xiàn)模塊的原理說起。為了方便稱呼，我們假設(shè)把這種組件叫做模塊私有組件，其他的未加scoped的叫做模塊一般組件。

通過查看DOM結(jié)構(gòu)發(fā)現(xiàn)：vue通過在DOM結(jié)構(gòu)以及css樣式上加唯一不重復(fù)的標(biāo)記，以保證唯一，達(dá)到樣式私有化模塊化的目的。具體的渲染結(jié)果是怎樣的，通過一個例子來說明。

公共組件button組件

一個公共組件button，為了樣式模塊化，給其加上scoped屬性，

//button.vue<template>  <div class="button-warp">    <button class="button">text</button>  </div></template>...<style scoped>  .button-warp{    display:inline-block;  }  .button{    padding: 5px 10px;    font-size: 12px;    border-radus: 2px;  }</style>

瀏覽器渲染button組件

button組件在瀏覽器渲染出的html部分和css部分分別為：

<div data-v-2311c06a class="button-warp">  <button data-v-2311c06a class="button">text</button></div>

.button-warp[data-v-2311c06a]{  display:inline-block;}.button[data-v-2311c06a]{  padding: 5px 10px;  font-size: 12px;  border-radus: 2px;}

從上面的字可以看出，添加了scoped屬性的組件，為了達(dá)到組件樣式模塊化，做了兩個處理：

給HTML的DOM節(jié)點加一個不重復(fù)data屬性(形如：data-v-2311c06a)來表示他的唯一性 在每句css選擇器的末尾（編譯后的生成的css語句）加一個當(dāng)前組件的data屬性選擇器（如[data-v-2311c06a]）來私有化樣式

大家都知道css樣式有一個優(yōu)先級的說法，scoped的這一操作，雖然達(dá)到了組件樣式模塊化的目的，但是會造成一種后果：每個樣式的權(quán)重加重了：理論上我們要去修改這個樣式，需要更高的權(quán)重去覆蓋這個樣式。這是增加復(fù)雜度的其中一個維度。

其他組件引用button組件

上面分析了單個組件渲染后的結(jié)果,那么組件互相調(diào)用之后會出現(xiàn)什么樣的結(jié)果呢？，具體分兩種情況：模塊一般組件引用模塊私有組件（本質(zhì)和模塊私有組件引用模塊一般組件一樣）；模塊私有組件引用模塊私有組件。

舉個例子：在組件content.vue中使用了button組件，那么content.vue組件是否添加scoped屬性渲染出來的結(jié)果有什么區(qū)別呢？

//content.vue<template>  <div class="content">    <p class="title"></p>    <!-- v-button假設(shè)是上面定義的組件 -->    <v-button></v-button>  </div></template>...<style>  .content{    width: 1200px;    margin: 0 auto;  }  .content .button{    border-raduis: 5px;  }</style>