在vue組件中，為了使樣式私有化（模塊化），不對全局造成污染，可以在style標簽上添加scoped屬性以表示它的只屬於當下的模塊，這是一個非常好的舉措，但是為什么要慎用呢？因為在我們需要修改公共組件（三方庫或者項目定制的組件）的樣式的時候，scoped往往會造成更多的困難，需要增加額外的復雜度。
scoped實現私有化樣式的原理
為什么會說，會增加復雜度？那么我們先從的實現模塊的原理說起。為了方便稱呼，我們假設把這種組件叫做模塊私有組件，其他的未加scoped的叫做模塊一般組件。
通過查看DOM結構發現：vue通過在DOM結構以及css樣式上加唯一不重復的標記，以保證唯一，達到樣式私有化模塊化的目的。具體的渲染結果是怎樣的，通過一個例子來說明。
公共組件button組件
一個公共組件button，為了樣式模塊化，給其加上scoped屬性，
1 //button.vue 2 <template> 3 <div class="button-warp"> 4 <button class="button">text</button> 5 </div> 6 </template> 7 ... 8 <style scoped> 9 .button-warp{ 10 display:inline-block; 11 } 12 .button{ 13 padding: 5px 10px; 14 font-size: 12px; 15 border-radus: 2px; 16 } 17 </style>
瀏覽器渲染button組件
button組件在瀏覽器渲染出的html部分和css部分分別為：
1 <div data-v-2311c06a class="button-warp"> 2 <button data-v-2311c06a class="button">text</button> 3 </div>
1 .button-warp[data-v-2311c06a]{ 2 display:inline-block; 3 } 4 .button[data-v-2311c06a]{ 5 padding: 5px 10px; 6 font-size: 12px; 7 border-radus: 2px; 8 }
從上面的字可以看出，添加了scoped屬性的組件，為了達到組件樣式模塊化，做了兩個處理：
給HTML的DOM節點加一個不重復data屬性(形如：data-v-2311c06a)來表示他的唯一性
在每句css選擇器的末尾（編譯后的生成的css語句）加一個當前組件的data屬性選擇器（如[data-v-2311c06a]）來私有化樣式
大家都知道css樣式有一個優先級的說法，scoped的這一操作，雖然達到了組件樣式模塊化的目的，但是會造成一種后果：每個樣式的權重加重了：理論上我們要去修改這個樣式，需要更高的權重去覆蓋這個樣式。這是增加復雜度的其中一個維度。
其他組件引用button組件
上面分析了單個組件渲染后的結果,那么組件互相調用之后會出現什么樣的結果呢？，具體分兩種情況：模塊一般組件引用模塊私有組件（本質和模塊私有組件引用模塊一般組件一樣）；模塊私有組件引用模塊私有組件。
舉個例子：在組件content.vue中使用了button組件，那么content.vue組件是否添加scoped屬性渲染出來的結果有什么區別呢？
1 //content.vue 2 <template> 3 <div class="content"> 4 <p class="title"></p> 5 <!-- v-button假設是上面定義的組件 --> 6 <v-button></v-button> 7 </div> 8 </template> 9 ... 10 <style> 11 .content{ 12 width: 1200px; 13 margin: 0 auto; 14 } 15 .content .button{ 16 border-raduis: 5px; 17 } 18 </style>
模塊一般組件（未添加scoped）引用模塊私有組件
如果style上沒有加scoped屬性，那么渲染出來html和css分別就是：
1 <div class="content"> 2 <p class="title"></p> 3 <!-- v-button假設是上面定義的組件 --> 4 <div data-v-2311c06a class="button-warp"> 5 <button data-v-2311c06a class="button">text</button> 6 </div> 7 </div>
1 /*button.vue渲染出來的css*/ 2 .button-warp[data-v-2311c06a]{ 3 display:inline-block; 4 } 5 .button[data-v-2311c06a]{ 6 padding: 5px 10px; 7 font-size: 12px; 8 border-radus: 2px; 9 } 10 /*content.vue渲染出來的css*/ 11 .content{ 12 width: 1200px; 13 margin: 0 auto; 14 } 15 .content .button{ 16 border-raduis: 5px; 17 }
可以看出，雖然在content組件中，修改了button的border-raduis屬性，但是由於權重關系，生效的依然是組件內部的樣式（此時是外部的樣式被覆蓋）。所以如果要達到修改樣式的目的，就必須加重我們要修改樣式的權重（增加選擇器層級，ID選擇器，並列選擇器，impotant等）
模塊私有組件（添加scoped）引用模塊私有組件
如果加了scoped屬性呢？按照開始分析出來的規則（事實也是這么的）：
首先是在所有的DOM節點加上data屬性
然后在css選擇器尾部加上data屬性選擇器
那么渲染出來html和css分別就是：
1 <div data-v-57bc25a0 class="content"> 2 <p data-v-57bc25a0 class="title"></p> 3 <!-- v-button假設是上面定義的組件 --> 4 <div data-v-57bc25a0 data-v-2311c06a class="button-warp"> 5 <button data-v-2311c06a class="button">text</button> 6 </div> 7 </div>
1 /*button.vue渲染出來的css*/ 2 .button-warp[data-v-2311c06a]{ 3 display:inline-block; 4 } 5 .button[data-v-2311c06a]{ 6 padding: 5px 10px; 7 font-size: 12px; 8 border-radus: 2px; 9 } 10 /*content.vue渲染出來的css*/ 11 .content[data-v-57bc25a0]{ 12 width: 1200px; 13 margin: 0 auto; 14 } 15 .content .button[data-v-57bc25a0]{ 16 border-raduis: 5px; 17 }
對於上面的兩種情況，可以明顯看出來渲染后的結果大不相同。
雖然我們在content添加了想要修改button組件的樣式的代碼，但是仔細看，由於.content .button這句在末尾加的是content組件的scoped標記，最后這句其實根本作用不到我們想要的DOM節點上，所以這種情況我們在content內部寫的任何樣式都不會影響到button.vue組件，所以這就尷尬了。。。。
當然這個問題也是可以解決的，就是直接加全局樣式可以修改到，但這勢必會影響全部地方的組件；所以需要另外一種方法在content.vue組件內再加一個不帶scoped屬性的style標簽，也就意味着要加兩個style，一個用於私有樣式，一個用於共有樣式。這肯定是有點shit的，並且這兩種解決方案都回避不了一個問題：權重！！！
1 //content.vue 2 <template> 3 <div class="content"> 4 <p class="title"></p> 5 <!-- v-button假設是上面定義的組件 --> 6 <v-button></v-button> 7 </div> 8 </template> 9 ... 10 <style scoped> 11 .content{ 12 width: 1200px; 13 margin: 0 auto; 14 } 15 </style> 16 <style> 17 .content .button{ 18 border-raduis: 5px; 19 } 20 </style>
這樣符合規范么？貌似沒看到不能這么寫，並且這么寫也確實生效了。。。但這樣確實增加了思維的復雜度，有點苦惱啊。
總結scoped的渲染規則
總結一下scoped三條渲染規則
給HTML的DOM節點加一個不重復data屬性(形如：data-v-2311c06a)來表示他的唯一性
在每句css選擇器的末尾（編譯后的生成的css語句）加一個當前組件的data屬性選擇器（如[data-v-2311c06a]）來私有化樣式
如果組件內部包含有其他組件，只會給其他組件的最外層標簽加上當前組件的data屬性
解決方案
對於引用的三方庫，如果對方使用了scoped，我們無力改變什么，如果確實需要修改他的樣式最能在不加scoped的組件中修改樣式，或者全局樣式直接修改，這很粗暴！
對於自己維護的組件，一定要想清楚，組件的樣式能否滿足所有的情況。如果確實需要加，無疑會增加使用這個組件的開發同學的工作！
關於css scope 可以看看 https://developer.mozilla.org/zh-CN/docs/Web/CSS/:scope
————————————————
版權聲明：本文為CSDN博主「潛行的Q」的原創文章，遵循CC 4.0 by-sa版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/margin_0px/article/details/83014024