VUE中的scoped屬性和深度選擇器

眾所周知，在vue中我們在style標籤中寫樣式時，為了防止當前元件或頁面的樣式對外界其它的頁面元件造成影響，會給vue中的 style標籤加上 scoped 屬性，該屬性使樣式變成了局域樣式，只作用於當前元件。vue中的scoped屬性的設計思想就是讓當前元件的樣式不會修改到其它地方的樣式。

原理通過觀察頁面的dom發現：vue中的scoped屬性給相應的dom結構和css選擇器都加上了標識，這個唯一的標記保證了唯一性，從而達到了樣式的私有化，不會汙染全域性的作用。這個標識就是給標籤新增上乙個 [data-v-hash] 的屬性。

需要注意的是，如果當父元件、子元件同時使用 scoped 屬性時，子元件最外層的標籤會被加上當前元件的hash值，同時也會被加上父元件的hash

值。同樣的css樣式部分的選擇器也會被加上這個標識屬性。

總結vue中的scoped屬性實現樣式私有化：

在vue中，為了不讓當前元件的樣式修改其它地方的樣式，就有了scoped屬性。但有時候不想用預設的樣式，需要自定義自己的樣式時，比如：引用的第三方元件庫,

同時還不想去除scoped屬性，避免汙染全域性，可以選擇使用深度選擇器。

在vue中，可以使用深度選擇器 >>> 來穿透scoped，來修改樣式，但是像 sass 之類的預處理語言無法正確解析 >>>，可以使用 /deep/ 操作符(>>> 的別名)

或者 ::v-deep 操作符(>>> 的別名)來實現同樣的效果。