vue中style下scope的使用和坑
在vue元件中,為了使樣式私有化(模組化),不對全域性造成汙染,可以在style標籤上新增scoped屬性以表示它的只屬於當下的模組,這是一個非常好的舉措,但是為什麼要慎用呢?因為在我們需要修改公共元件(三方庫或者專案定製的元件)的樣式的時候,scoped往往會造成更多的困難,需要增加額外的複雜度。
scoped實現私有化樣式的原理
為什麼會說,會增加複雜度?那麼我們先從的實現模組的原理說起。為了方便稱呼,我們假設把這種元件叫做模組私有元件,其他的未加scoped的叫做模組一般元件。
通過檢視DOM結構發現:vue通過在DOM結構以及css樣式上加唯一不重複的標記,以保證唯一,達到樣式私有化模組化的目的。具體的渲染結果是怎樣的,通過一個例子來說明。
公共元件button元件
一個公共元件button,為了樣式模組化,給其加上scoped屬性,
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
|
瀏覽器渲染button元件
button元件在瀏覽器渲染出的html部分和css部分分別為:
1 2 3 |
|
1 2 3 4 5 6 7 8 |
|
從上面的字可以看出,添加了scoped屬性的元件,為了達到元件樣式模組化,做了兩個處理:
- 給HTML的DOM節點加一個不重複data屬性(形如:data-v-2311c06a)來表示他的唯一性
- 在每句css選擇器的末尾(編譯後的生成的css語句)加一個當前元件的data屬性選擇器(如[data-v-2311c06a])來私有化樣式
大家都知道css樣式有一個優先順序的說法,scoped的這一操作,雖然達到了元件樣式模組化的目的,但是會造成一種後果:每個樣式的權重加重了:理論上我們要去修改這個樣式,需要更高的權重去覆蓋這個樣式。這是增加複雜度的其中一個維度。
其他元件引用button元件
上面分析了單個元件渲染後的結果,那麼元件互相呼叫之後會出現什麼樣的結果呢?,具體分兩種情況:模組一般元件引用模組私有元件(本質和模組私有元件引用模組一般元件一樣);模組私有元件引用模組私有元件。
舉個例子:在元件content.vue中使用了button元件,那麼content.vue元件是否新增scoped屬性渲染出來的結果有什麼區別呢?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
|
模組一般元件(未新增scoped)引用模組私有元件
如果style上沒有加scoped屬性,那麼渲染出來html和css分別就是:
1 2 3 4 5 6 7 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
|
可以看出,雖然在content元件中,修改了button的border-raduis屬性,但是由於權重關係,生效的依然是元件內部的樣式(此時是外部的樣式被覆蓋)。所以如果要達到修改樣式的目的,就必須加重我們要修改樣式的權重(增加選擇器層級,ID選擇器,並列選擇器,impotant等)
模組私有元件(新增scoped)引用模組私有元件
如果加了scoped屬性呢?按照開始分析出來的規則(事實也是這麼的):
首先是在所有的DOM節點加上data屬性
然後在css選擇器尾部加上data屬性選擇器
那麼渲染出來html和css分別就是:
1 2 3 4 5 6 7 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
|
對於上面的兩種情況,可以明顯看出來渲染後的結果大不相同。
雖然我們在content添加了想要修改button元件的樣式的程式碼,但是仔細看,由於.content .button這句在末尾加的是content元件的scoped標記,最後這句其實根本作用不到我們想要的DOM節點上,所以這種情況我們在content內部寫的任何樣式都不會影響到button.vue元件,所以這就尷尬了。。。。
當然這個問題也是可以解決的,就是直接加全域性樣式可以修改到,但這勢必會影響全部地方的元件;所以需要另外一種方法在content.vue元件內再加一個不帶scoped屬性的style標籤,也就意味著要加兩個style,一個用於私有樣式,一個用於共有樣式。這肯定是有點shit的,並且這兩種解決方案都回避不了一個問題:權重!!!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
|
這樣符合規範麼?貌似沒看到不能這麼寫,並且這麼寫也確實生效了。。。但這樣確實增加了思維的複雜度,有點苦惱啊。
總結scoped的渲染規則
總結一下scoped三條渲染規則
- 給HTML的DOM節點加一個不重複data屬性(形如:data-v-2311c06a)來表示他的唯一性
- 在每句css選擇器的末尾(編譯後的生成的css語句)加一個當前元件的data屬性選擇器(如[data-v-2311c06a])來私有化樣式
- 如果元件內部包含有其他元件,只會給其他元件的最外層標籤加上當前元件的data屬性
解決方案
對於引用的三方庫,如果對方使用了scoped,我們無力改變什麼,如果確實需要修改他的樣式最能在不加scoped的元件中修改樣式,或者全域性樣式直接修改,這很粗暴!
對於自己維護的元件,一定要想清楚,元件的樣式能否滿足所有的情況。如果確實需要加,無疑會增加使用這個元件的開發同學的工作!