vue中style下scoped的屬性的原理

scoped屬性的功能

實現組件的私有化，不對全局造成樣式污染，表示當前style屬性只屬於當前模
塊

// style中有scoped組件私有化不會對全局造成影響


<style scoped lang='scss'>
.header-group{
    background-color: black;
    padding: 20px 14px 10px;
    .address-group{
        color:white;
        font-size: 16px;
        font-weight: 700;
    }
}
</style>

// style中沒有scoped,適用於全局樣式



<style lang='scss'>
@import 'style/init.css';
.van-search{
  padding: 0;
}
</style>

實現原理

通過觀察DOM結構可以發現：vue通過在DOM結構以及css樣式上加上唯一的標記，保證唯一，達到樣式私有化，不污染全局的作用，如圖，樣式屬性上也會多一個該字符，以保證唯一可以看出加上scoped后的組件里的標簽都會多一個 data-v-8dc7cce2 的屬性，並且在css樣式部分可以看出

 

 

 由此可知，添加scoped屬性的組件，為了達到不污染全局，做了如下處理：

• 給HTML的DOM節點加一個不重復屬性 data-v-8dc7cce2 標志唯一性
• 在添加scoped屬性的組件的每個樣式選擇器后添加一個等同與“不重復屬性”相同的字段，實現類似於“作用域”的作用，不影響全局
• 如果組件內部還有組件，只會給最外層的組件里的標簽加上唯一屬性字段，不影響組件內部引用的組件（ 注意 ）