Vue:scoped與module的使用與利弊

zhoutk 發(fā)布于2019-08-30 15:55 / 1183人閱讀

摘要：一個應(yīng)用是離不開與，其中充斥的整個項(xiàng)目中。下面我會分別對與解決方案進(jìn)行說明，最后在分析它們的利弊與選擇。不過一個子組件的根節(jié)點(diǎn)會同時受其父組件有作用域的和子組件有作用域的的影響。但它的局限性是適用于中小項(xiàng)目中。

一個web應(yīng)用是離不開html、css與js，其中css充斥的整個web項(xiàng)目中。css它有一個特定，它是全局的。這樣的特性導(dǎo)致的結(jié)果是，一旦你在不同的地方定義了相同的css命名，那么它們的樣式就會相互覆蓋，最終導(dǎo)致的style錯亂，從而影響整個網(wǎng)頁布局。

我相信對于每一個前端開發(fā)者都遇到過這種css樣式覆蓋的情況，值得慶幸的是，這些問題前輩都已經(jīng)給出了解決方案。

在Vue中我們通過Scoped與Module來解決。下面我會分別對scoped與module解決方案進(jìn)行說明，最后在分析它們的利弊與選擇。如果你還未使用過或者說對它們之間的利弊與選擇存在疑問的，相信這篇文章能夠幫你解惑。

Scoped

假設(shè)我們有如下一段代碼：

index.vue

GreenTitle.vue

最終這屏幕上展示的是兩行紅色的文字，這就是父組件與子組件都定義了title-wrap的樣式，導(dǎo)致子組件的樣式被父組件所覆蓋。

遇到這種情況，可以在style標(biāo)簽中添加scoped屬性

scoped作用的阻止上層的css樣式傳遞到下層，限制當(dāng)前css作用域，使其只對當(dāng)前組件生效。

知道了它的作用，下面我們在開深入看下它的實(shí)現(xiàn)。

前面的是沒有添加scoped的源碼，后面是添加了scoped的源碼。我們進(jìn)行一一對比，發(fā)現(xiàn)前面的兩個div標(biāo)簽都使用了title-wrap樣式，自然導(dǎo)致樣式覆蓋；而后面的兩個div標(biāo)簽，第一個增加了data-v-67e6b31f的前綴，這就是父組的style中增加scoped的效果，區(qū)別與第二個div中的title-wrap樣式。

scoped的實(shí)現(xiàn)是借助了PostCSS實(shí)現(xiàn)的，一旦增加了scoped，他會將之前覆蓋的樣式轉(zhuǎn)換成下面的樣式

通過這種轉(zhuǎn)換方式，間接的改變了原有的css命名。防止上層組件樣式覆蓋下層組件樣式。

特性

細(xì)心的讀者可能會發(fā)現(xiàn)上面的后一張?jiān)创a圖中第二個div的content中也有data-v-67e6b31f，可能會疑問，第二個content不是子組件中的css嗎？子組件中未添加scoped，為什么還會添加data-v-67e6b31f前綴？

這是scoped的一個特性，使用 scoped 后，父組件的樣式將不會滲透到子組件中。不過一個子組件的根節(jié)點(diǎn)會同時受其父組件有作用域的 CSS 和子組件有作用域的 CSS 的影響。這樣設(shè)計(jì)是為了讓父組件可以從布局的角度出發(fā)，調(diào)整其子組件根元素的樣式。

所以如果我們將子組件做如下修改

由于父組件scoped特性，所以會影響到子組件的title-wrap，也會添加data-v-67e6b31f前綴

那么又有個疑問，增加了scoped是否就一定不能傳遞的下層組件呢？畢竟我們可能有需要個別樣式傳遞到下層的需求。別急，接著看，這個也能很方便的解決。

深度作用

如果你希望scoped中的某個樣式能夠作用的更深，影響到子組件，你可以使用>>>操作符

注意看我將style中的lang="scss"去掉了，因?yàn)榧恿祟A(yù)處理器后無法正確解析>>>，這種情況可以使用/deep/代替，本質(zhì)是>>>的別名

將會編譯成

.content[data-v-67e6b31f] .title-wrap {
    font-size: 20px;
    color: red;
}

通過 v-html 創(chuàng)建的 DOM 內(nèi)容不受作用域內(nèi)的樣式影響，但是你仍然可以通過深度作用選擇器來為他們設(shè)置樣式

Module

針對上面的覆蓋問題，還可以通過設(shè)置module來解決

module的用法也很簡單，只要在style中增加module屬性即可。不同之處是它在布局中的引用，都需要添加前綴$style。因?yàn)橥ㄟ^module作用的style都被保存到$style對象中。我可以通過console查看它的具體引用名。

mounted() {
  console.log(this.$style)
  console.log(this.$style["title-wrap"])
}

通過觀察，發(fā)現(xiàn)引用名有一定的規(guī)律。都是已index開頭，后面再接著style中定義的命名，最后再接個后綴。這里的index是父組件的文件名index.vue。所以通過module作用的style將會重新命名為：文件名_原style名_不定后綴。

這么命名又有什么好處呢？我們再來看下展示的效果

當(dāng)我們在瀏覽的控制臺查看Elements時，優(yōu)點(diǎn)顯而易見。相對于scoped的方式，module的方式能夠一眼知道該元素時屬于哪個文件組件中。在大型項(xiàng)目中能夠幫助我們迅速定位到要查找的組件。

除了上述的快速定位，由于module會將所有的style都?xì)w入$style中，所以我們可以很靈活的將任意的父組件樣式傳遞到任意深層的子組件中。例如，將父組件中的title-wrap通過props傳遞到子組件中

module還有一個特性非常不錯，它可以導(dǎo)出定義的變量，將變量歸入$style中，例如：

更多module相關(guān)操作可以點(diǎn)擊查看

總結(jié)

scoped與module都非常簡單、易用，那么又該如何選擇呢？

通過上面的使用對比，發(fā)現(xiàn)scoped不需要額外的知識，只要在style中定義scoped屬性即可，使用非常簡便。但它的局限性是適用于中小項(xiàng)目中。因?yàn)閟coped作用的style對于我們來說不直觀，對于快速查找定位，module更加合適，同時module對于style向下傳遞的控制權(quán)也非常靈活；額外的還有變量導(dǎo)出等便捷功能。

所以如果你是小項(xiàng)目中且低成本的使用，scoped更加適合；而對大項(xiàng)目module更加合適，雖然有一點(diǎn)學(xué)習(xí)成本，但對于用更好的控制權(quán)、可觀性與定位速度來說也就不值一提。

公眾號

感覺不錯的可以來一波關(guān)注，掃描下方二維碼，關(guān)注公眾號:怪談時間，及時獲取最新知識技巧與互聯(lián)網(wǎng)新動態(tài)。