淺談vue中慎用style的scoped屬性，vuescoped

淺談vue中慎用style的scoped屬性，vuescoped

在vue組件中，為了使樣式私人化（模組化），不對全域造成汙染，可以在style標籤上添加scoped屬性以表示它的只屬於當下的模組，這是一個非常好的舉措，但是為什麼要慎用呢？因為在我們需要修改公用組件（三方庫或者項目定製的組件）的樣式的時候，scoped往往會造成更多的困難，需要增加額外的複雜度。

scoped實現私人化樣式的原理

為什麼會說，會增加複雜度？那麼我們先從的實現模組的原理說起。為了方便稱呼，我們假設把這種組件叫做模組私人組件，其他的未加scoped的叫做模組一般組件。

通過查看DOM結構發現：vue通過在DOM結構以及css樣式上加唯一不重複的標記，以保證唯一，達到樣式私人化模組化的目的。具體的渲染結果是怎樣的，通過一個例子來說明。

公用組件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屬性的組件，為了達到組件樣式模組化，做了兩個處理：

1. 給HTML的DOM節點加一個不重複data屬性(形如：data-v-2311c06a)來表示他的唯一性
2. 在每句css選取器的末尾（編譯後的產生的css語句）加一個當前組件的data屬性選取器（如[data-v-2311c06a]）來私人化樣式

大家都知道css樣式有一個優先順序的說法，scoped的這一操作，雖然達到了組件樣式模組化的目的，但是會造成一種後果：每個樣式的權重加重了：理論上我們要去修改這個樣式，需要更高的權重去覆蓋這個樣式。這是增加複雜度的其中一個維度。

其他組件引用button組件

上面分析了單個組件渲染後的結果,那麼組件互相調用之後會出現什麼樣的結果呢？，具體分兩種情況：模組一般組件引用模組私人組件（本質和模組私人組件引用模組一般組件一樣）；模組私人組件引用模組私人組件。

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

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

模組一般組件（未添加scoped）引用模組私人組件

如果style上沒有加scoped屬性，那麼渲染出來html和css分別就是：

<div class="content">  <p class="title"></p>  <!-- v-button假設是上面定義的組件 -->  <div data-v-2311c06a class="button-warp">    <button data-v-2311c06a class="button">text</button>  </div></div>

/*button.vue渲染出來的css*/.button-warp[data-v-2311c06a]{  display:inline-block;}.button[data-v-2311c06a]{  padding: 5px 10px;  font-size: 12px;  border-radus: 2px;}/*content.vue渲染出來的css*/.content{  width: 1200px;  margin: 0 auto;}.content .button{  border-raduis: 5px;}

可以看出，雖然在content組件中，修改了button的border-raduis屬性，但是由於權重關係，生效的依然是組件內部的樣式（此時是外部的樣式被覆蓋）。所以如果要達到修改樣式的目的，就必須加重我們要修改樣式的權重（增加選取器層級，ID選取器，並欄選取器，impotant等）

模組私人組件（添加scoped）引用模組私人組件

如果加了scoped屬性呢？按照開始分析出來的規則（事實也是這麼的）：

首先是在所有的DOM節點加上data屬性

然後在css選取器尾部加上data屬性選取器

那麼渲染出來html和css分別就是：

<div data-v-57bc25a0 class="content">  <p data-v-57bc25a0 class="title"></p>  <!-- v-button假設是上面定義的組件 -->  <div data-v-57bc25a0 data-v-2311c06a class="button-warp">    <button data-v-2311c06a class="button">text</button>  </div></div>

/*button.vue渲染出來的css*/.button-warp[data-v-2311c06a]{  display:inline-block;}.button[data-v-2311c06a]{  padding: 5px 10px;  font-size: 12px;  border-radus: 2px;}/*content.vue渲染出來的css*/.content[data-v-57bc25a0]{  width: 1200px;  margin: 0 auto;}.content .button[data-v-57bc25a0]{  border-raduis: 5px;}

對於上面的兩種情況，可以明顯看出來渲染後的結果大不相同。

雖然我們在content添加了想要修改button組件的樣式的代碼，但是仔細看，由於.content .button這句在末尾加的是content組件的scoped標記，最後這句其實根本作用不到我們想要的DOM節點上，所以這種情況我們在content內部寫的任何樣式都不會影響到button.vue組件，所以這就尷尬了。。。。

當然這個問題也是可以解決的，就是直接加全域樣式可以修改到，但這勢必會影響全部地方的組件；所以需要另外一種方法在content.vue組件內再加一個不帶scoped屬性的style標籤，也就意味著要加兩個style，一個用於私人樣式，一個用於共有樣式。這肯定是有點shit的，並且這兩種解決方案都迴避不了一個問題：權重！！！

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

這樣符合規範嗎？貌似沒看到不能這麼寫，並且這麼寫也確實生效了。。。但這樣確實增加了思維的複雜度，有點苦惱啊。

總結scoped的渲染規則

總結一下scoped三條渲染規則

1. 給HTML的DOM節點加一個不重複data屬性(形如：data-v-2311c06a)來表示他的唯一性
2. 在每句css選取器的末尾（編譯後的產生的css語句）加一個當前組件的data屬性選取器（如[data-v-2311c06a]）來私人化樣式
3. 如果組件內部包含有其他組件，只會給其他組件的最外層標籤加上當前組件的data屬性

解決方案

對於引用的三方庫，如果對方使用了scoped，我們無力改變什麼，如果確實需要修改他的樣式最能在不加scoped的組件中修改樣式，或者全域樣式直接修改，這很粗暴！

對於自己維護的組件，一定要想清楚，組件的樣式能否滿足所有的情況。如果確實需要加，無疑會增加使用這個組件的開發同學的工作！

當然對於這個問題，如果諸君有更好的解決方案，請諸君TELL ME一下下！

趣事

<del> 在使用scoped一定要謹慎scoped的這個特性，本人以為這是一個BUG，就去提了issue </del>，結果尤大很霸氣的回複
scoped設計的初衷就是不能讓當前組件的樣式修改其他任何地方的樣式，因為設計如此。所以理所當然的這個issue已被幹掉

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。