scope樣式隔離

在 Vue 中，樣式隔離是通過(guò) scoped 特性實(shí)現(xiàn)的。當(dāng)在一個(gè)組件的 <style> 標(biāo)簽上添加 scoped 特性時(shí)，Vue 會(huì)自動(dòng)為這個(gè)樣式塊中的所有選擇器添加一個(gè)唯一的屬性，以確保這些樣式只對(duì)當(dāng)前組件生效，從而達(dá)到樣式隔離的效果。

以下是 scoped 樣式隔離的基本原理：

1. 「唯一屬性添加：」 在編譯過(guò)程中，Vue 會(huì)將樣式塊中的每個(gè)選擇器都轉(zhuǎn)換為一個(gè)帶有唯一屬性的選擇器。例如，如果有一個(gè)類似 .my-class 的選擇器，可能會(huì)被轉(zhuǎn)換成類似 .my-class[data-v-xxxxxxx] 的形式，其中 data-v-xxxxxxx 是一個(gè)唯一的屬性。
2. 「屬性注入到組件元素：」 在組件渲染時(shí)，Vue 會(huì)自動(dòng)將這個(gè)唯一的屬性注入到組件的根元素上。這樣，樣式塊中的選擇器就會(huì)匹配到具有相同唯一屬性的元素，從而確保樣式只會(huì)應(yīng)用到當(dāng)前組件。

下面是一個(gè)簡(jiǎn)單的示例：

<template>
  <div class="my-component">
    <p class="my-class">This is a paragraph.</p>
  </div>
</template>


<style scoped>
.my-class {
  color: red;
}
</style>

在這個(gè)例子中，<style scoped> 中的樣式會(huì)被轉(zhuǎn)換，使得 .my-class 成為 .my-class[data-v-xxxxxxx]。然后，這個(gè)唯一屬性 data-v-xxxxxxx 會(huì)被注入到組件根元素上，使得樣式只會(huì)應(yīng)用到當(dāng)前組件內(nèi)的元素，而不會(huì)影響到其他組件。

這種樣式隔離的機(jī)制保證了組件之間的樣式不會(huì)相互干擾，是 Vue 組件化開發(fā)中的一個(gè)重要特性。

如何打破scope的限制？

在 Vue 中，scoped 樣式的設(shè)計(jì)初衷是為了實(shí)現(xiàn)組件樣式的隔離，以防止樣式污染和沖突。然而，有時(shí)候可能需要打破 scoped 樣式的限制。以下是一些常見(jiàn)的方法：

1. 使用 ::v-deep 或 /deep/：

在 scoped 樣式中，可以使用 ::v-deep 或 /deep/ 偽類選擇器來(lái)打破樣式的封裝，以便選擇子組件中的元素。需要注意的是，這兩個(gè)選擇器在 Vue 2.x 中是等效的，但在 Vue 3.x 中 ::v-deep 被廢棄，取而代之的是 /deep/。

<style scoped>
::v-deep .my-class {
  color: blue;
}


/* 或者在 Vue 3.x 中可以使用 /deep/ */
/deep/ .my-class {
  color: blue;
}
</style>

這樣可以讓樣式穿透到子組件中。

2. 使用全局樣式：

如果確實(shí)需要在多個(gè)組件之間共享樣式，可以考慮將樣式定義為全局樣式而不使用 scoped 特性。

<style>
.my-class {
  color: red;
}
</style>

3. 使用深度選擇器：

在 Vue 3.x 中，可以使用 ::v-slotted 深度選擇器來(lái)選擇插槽中的元素。這在處理插槽樣式時(shí)非常有用。

<style scoped>
::v-slotted(.my-class) {
  color: green;
}
</style>

在使用這些方法時(shí)，需要謹(jǐn)慎考慮樣式的全局性和可維護(hù)性，以確保樣式的修改不會(huì)產(chǎn)生意外的副作用。打破 scoped 樣式的限制可能會(huì)導(dǎo)致不易維護(hù)的代碼，因此建議僅在確實(shí)需要的情況下使用。

deep

在 Vue 2.x 中，使用 ::v-deep 或 /deep/ 可以穿透 scoped 樣式的限制的原因與其實(shí)現(xiàn)方式有關(guān)。這兩個(gè)選擇器的作用是告訴樣式引擎在處理選擇器時(shí)要忽略 scoped 樣式中的作用域，從而可以選擇到子組件中的元素。

實(shí)際上，::v-deep 和 /deep/ 是 Vue 對(duì)樣式處理引擎進(jìn)行了處理，使其能夠正確解析這些選擇器，然后將樣式應(yīng)用到相應(yīng)的 DOM 元素上。

在 Vue 3.x 中，::v-deep 被廢棄，取而代之的是 /deep/ 或 ::v-slotted。這種變化是為了更好地與 Web 標(biāo)準(zhǔn)兼容，因?yàn)?nbsp;::v-deep 不是 CSS 規(guī)范的一部分。

但是，穿透 scoped 樣式的做法實(shí)際上打破了組件的封裝性，可能導(dǎo)致樣式的不可預(yù)測(cè)性和不易維護(hù)性。在使用這種方式時(shí)需要權(quán)衡利弊，并確保清晰地了解可能產(chǎn)生的影響。最好的做法是遵循組件的封裝性原則，將樣式限制在組件內(nèi)部，以避免全局樣式的沖突和混亂。