scoped是什么意思呢？

加了scoped，PostCSS給組件中的所有dom添加了一個(gè)獨(dú)一無(wú)二的動(dòng)態(tài)屬性[哈希值]，并且給CSS選擇器額外添加一個(gè)對(duì)應(yīng)的屬性選擇器，使得樣式只作用于含有該屬性的dom——組件內(nèi)部dom，防止組件之間的樣式污染。

<div class="a">
    <div class="b">登錄</div>
</div>
<style lang="less" scoped>
.a {
  .b {
    background-color:#bfa
  }
}
</style>

postcss 是一種對(duì)css編譯的工具，通過(guò)內(nèi)部插件實(shí)現(xiàn)功能
1 . 自動(dòng)補(bǔ)全瀏覽器前綴 autoprefixer，
2 . 自動(dòng)把px代為轉(zhuǎn)換成rem，
3 . css 代碼壓縮等等。

打包編譯后這個(gè)屬性會(huì)變成這樣：

<div data-v-257dda99b class="a">
    <div data-v-257dda99b class="b">登錄</div>
</div>
<style scoped>
.a .b[data-v-257dda99b] {
    background-color:#bfa
}
</style>

/deep/、::v-deep、:deep() 深度選擇器的原理

1、使用場(chǎng)景：

當(dāng)我們開發(fā)一個(gè)頁(yè)面使用了子組件的時(shí)候，如果這時(shí)候需要改子組件的樣式，但是又不影響其他頁(yè)面使用這個(gè)子組件的樣式的時(shí)候

2、原理

scoped 樣式中的一個(gè)選擇器能夠選擇到子組件 或 后代組件中的元素
/deep/ === [哈希值]

父組件
<template>
    <div class="parent" id="app">
        <h1>我是父組件</h1>
        <child></child>
    </div>
</template>

<style lang="less" scoped>

    // 把子組件的背景變成紅色；然而并不起作用
    .child .dyx {
        background-color: red;
    }
    // 加上deep；起作用
    ::v-deep .child .dyx {
        background-color: red;
    }
</style>

子組件
<template>
    <div class="child">
        <h1>我是子組件</h1>
        <div class="dyx">
            <p>我是子組件的段落</p>
        </div>
    </div>
</template>

那么編譯后的結(jié)果就會(huì)是：

<div data-v-257dda99b class="parent"  id="app">
    <h1 data-v-257dda99b>我是父組件</h1>
    <div data-v-xxxxxxx class="child">
        <h1 data-v-xxxxxxx>我是子組件</h1>
        <div data-v-xxxxxxx class="dyx">
            <p data-v-xxxxxxx>我是子組件的段落</p>
        </div>
    </div>
</div>

[data-v-257dda99b] .child .dyx {
    background-color: red;
}

因?yàn)閂ue不會(huì)為深度作用選擇器后面的選擇器單元增加 屬性選擇器[data-v-實(shí)例標(biāo)識(shí)]，所以，后面的選擇器單元能夠選擇到子組件及后代組件中的元素