scoped屬性
眾所周知，在vue中我們在style標簽中寫樣式時，為了防止當前組件或頁面的樣式對外界其它的頁面組件造成影響，會給vue中的 style標簽 加上 scoped 屬性，該屬性使樣式變成了局域樣式，只作用於當前組件。vue中的scoped屬性的設計思想就是讓當前組件的樣式不會修改到其它 地方的樣式。
原理
通過觀察頁面的DOM發現：vue中的scoped屬性給相應的DOM結構和CSS選擇器都加上了標識，這個唯一的標記保證了唯一性，從而達到了樣式的 私有化，不會污染全局的作用。這個標識就是給標簽添加上一個 [data-v-hash] 的屬性。
需要注意的是，如果當父組件、子組件同時使用 scoped 屬性時，子組件最外層的標簽會被加上當前組件的hash值，同時也會被加上父組件的hash 值。
同樣的CSS樣式部分的選擇器也會被加上這個標識屬性。
需要注意的是，如果當父組件、子組件同時使用 scoped 屬性時，子組件最外層的標簽會被加上當前組件的hash值，同時也會被加上父組件的hash 值。
同樣的CSS樣式部分的選擇器也會被加上這個標識屬性。
總結vue中的scoped屬性實現樣式私有化：
- 給相應的HTML的DOM元素添加一個 [data-v-hash] 屬性的唯一標識。
- 給相應的DOM元素的樣式選擇器添加一個與標簽相同的 [data-v-hash] 屬性標識。
- 如果父子組件的style標簽都有scoped屬性時，子組件最外層的標簽會同時有父組件和子組件的 [data-v-hash] 的屬性標識
- 如果組件中還有組件(沒有scoped屬性)或者第三方組件時，只會給最外層的組件里的標簽加上 [data-v-hash] 的屬性標識，對組件內部的組件不影響。
深度選擇器
在vue中，為了不讓當前組件的樣式修改其它地方的樣式，就有了scoped屬性。但有時候不想用默認的樣式，需要自定義自己的樣式時，比如：引用的第三方組件庫, 同時還不想去除scoped屬性，避免污染全局，可以選擇使用深度選擇器。
在vue中，可以使用深度選擇器 >>> 來穿透scoped，來修改樣式，但是像 sass 之類的預處理語言無法正確解析 >>>，可以使用 /deep/ 操作符(>>> 的別名) 或者 ::v-deep 操作符(>>> 的別名)來實現同樣的效果。
<script scoped>
外層類名 >>> 第三方組件類名{
}
</script>
<script scoped>
外層類名 /deep/ 第三方組件類名{
}
</script>
<script scoped>
外層類名 ::v-deep 第三方組件類名{
}
</script>