首頁 > 文章 > web前端 > 在vue中有關如何使用style的scoped屬性

在vue中有關如何使用style的scoped屬性

亚连原創: 2018-06-23 17:55:201669瀏覽

這篇文章主要介紹了淺談vue中慎用style的scoped屬性，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧

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

scoped實現私有化樣式的原理

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

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

公共元件button元件

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

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

瀏覽器渲染button元件

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

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

.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>
  <p class="content">
    <p class="title"></p>
    <!-- v-button假设是上面定义的组件 -->
    <v-button></v-button>
  </p>
</template>
...
<style>
  .content{
    width: 1200px;
    margin: 0 auto;
  }
  .content .button{
    border-raduis: 5px;
  }
</style>

模組一般元件（未新增scoped）引用模組私有元件

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

<p class="content">
  <p class="title"></p>
  <!-- v-button假设是上面定义的组件 -->
  <p data-v-2311c06a class="button-warp">
    <button data-v-2311c06a class="button">text</button>
  </p>
</p>

/*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分別就是：

<p data-v-57bc25a0 class="content">
  <p data-v-57bc25a0 class="title"></p>
  <!-- v-button假设是上面定义的组件 -->
  <p data-v-57bc25a0 data-v-2311c06a class="button-warp">
    <button data-v-2311c06a class="button">text</button>
  </p>
</p>

/*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>
  <p class="content">
    <p class="title"></p>
    <!-- v-button假设是上面定义的组件 -->
    <v-button></v-button>
  </p>
</template>
...
<style scoped>
  .content{
    width: 1200px;
    margin: 0 auto;
  }
</style>
<style>
  .content .button{
    border-raduis: 5px;
  }
</style>

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

總結scoped的渲染規則

總結一下scoped三條渲染規則