vue中style下scope的使用和坑

在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屬性的組件，爲了達到組件樣式模塊化，作了兩個處理：

給HTML的DOM節點加一個不重複data屬性(形如：data-v-2311c06a)來表示他的惟一性
在每句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三條渲染規則

給HTML的DOM節點加一個不重複data屬性(形如：data-v-2311c06a)來表示他的惟一性
在每句css選擇器的末尾（編譯後的生成的css語句）加一個當前組件的data屬性選擇器（如[data-v-2311c06a]）來私有化樣式
若是組件內部包含有其餘組件，只會給其餘組件的最外層標籤加上當前組件的data屬性
解決方案

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

對於本身維護的組件，必定要想清楚，組件的樣式可否知足全部的狀況。若是確實須要加，無疑會增長使用這個組件的開發同窗的工做！--------------------- 原文：https://blog.csdn.net/margin_0px/article/details/83014024