在vue組件中，為了使樣式私有化（模塊化），不對(duì)全局造成污染，可以在style標(biāo)簽上添加scoped屬性以表示它的只屬于當(dāng)下的模塊，這是一個(gè)非常好的舉措，但是為什么要慎用呢？因?yàn)樵谖覀冃枰薷墓步M件（三方庫(kù)或者項(xiàng)目定制的組件）的樣式的時(shí)候，scoped往往會(huì)造成更多的困難，需要增加額外的復(fù)雜度。

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

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

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

公共組件button組件

一個(gè)公共組件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á)到組件樣式模塊化，做了兩個(gè)處理：

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

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

其他組件引用button組件

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

舉個(gè)例子：在組件content.vue中使用了button組件，那么content.vue組件是否添加scoped屬性渲染出來(lái)的結(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>

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

如果style上沒(méi)有加scoped屬性，那么渲染出來(lái)html和css分別就是：

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

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

可以看出，雖然在content組件中，修改了button的border-raduis屬性，但是由于權(quán)重關(guān)系，生效的依然是組件內(nèi)部的樣式（此時(shí)是外部的樣式被覆蓋）。所以如果要達(dá)到修改樣式的目的，就必須加重我們要修改樣式的權(quán)重（增加選擇器層級(jí)，ID選擇器，并列選擇器，impotant等）

模塊私有組件（添加scoped）引用模塊私有組件

如果加了scoped屬性呢？按照開(kāi)始分析出來(lái)的規(guī)則（事實(shí)也是這么的）：

首先是在所有的DOM節(jié)點(diǎn)加上data屬性

然后在css選擇器尾部加上data屬性選擇器

那么渲染出來(lái)html和css分別就是：

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

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

對(duì)于上面的兩種情況，可以明顯看出來(lái)渲染后的結(jié)果大不相同。

雖然我們?cè)赾ontent添加了想要修改button組件的樣式的代碼，但是仔細(xì)看，由于.content .button這句在末尾加的是content組件的scoped標(biāo)記，最后這句其實(shí)根本作用不到我們想要的DOM節(jié)點(diǎn)上，所以這種情況我們?cè)赾ontent內(nèi)部寫(xiě)的任何樣式都不會(huì)影響到button.vue組件，所以這就尷尬了。。。。

當(dāng)然這個(gè)問(wèn)題也是可以解決的，就是直接加全局樣式可以修改到，但這勢(shì)必會(huì)影響全部地方的組件；所以需要另外一種方法在content.vue組件內(nèi)再加一個(gè)不帶scoped屬性的style標(biāo)簽，也就意味著要加兩個(gè)style，一個(gè)用于私有樣式，一個(gè)用于共有樣式。這肯定是有點(diǎn)shit的，并且這兩種解決方案都回避不了一個(gè)問(wèn)題：權(quán)重?。?！

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

這樣符合規(guī)范么？貌似沒(méi)看到不能這么寫(xiě)，并且這么寫(xiě)也確實(shí)生效了。。。但這樣確實(shí)增加了思維的復(fù)雜度，有點(diǎn)苦惱啊。

總結(jié)scoped的渲染規(guī)則

總結(jié)一下scoped三條渲染規(guī)則

1. 給HTML的DOM節(jié)點(diǎn)加一個(gè)不重復(fù)data屬性(形如：data-v-2311c06a)來(lái)表示他的唯一性
2. 在每句css選擇器的末尾（編譯后的生成的css語(yǔ)句）加一個(gè)當(dāng)前組件的data屬性選擇器（如[data-v-2311c06a]）來(lái)私有化樣式
3. 如果組件內(nèi)部包含有其他組件，只會(huì)給其他組件的最外層標(biāo)簽加上當(dāng)前組件的data屬性

解決方案

對(duì)于引用的三方庫(kù)，如果對(duì)方使用了scoped，我們無(wú)力改變什么，如果確實(shí)需要修改他的樣式最能在不加scoped的組件中修改樣式，或者全局樣式直接修改，這很粗暴！

對(duì)于自己維護(hù)的組件，一定要想清楚，組件的樣式能否滿(mǎn)足所有的情況。如果確實(shí)需要加，無(wú)疑會(huì)增加使用這個(gè)組件的開(kāi)發(fā)同學(xué)的工作！

當(dāng)然對(duì)于這個(gè)問(wèn)題，如果諸君有更好的解決方案，請(qǐng)諸君TELL ME一下下！

趣事

<del> 在使用scoped一定要謹(jǐn)慎scoped的這個(gè)特性，本人以為這是一個(gè)BUG，就去提了issue </del>，結(jié)果尤大很霸氣的回復(fù)
scoped設(shè)計(jì)的初衷就是不能讓當(dāng)前組件的樣式修改其他任何地方的樣式，因?yàn)樵O(shè)計(jì)如此。所以理所當(dāng)然的這個(gè)issue已被干掉

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論