理解scoped和/deep/工作原理

scoped是什么意思呢？

加了scoped，PostCSS给组件中的所有dom添加了一个独一无二的动态属性[哈希值]，并且给CSS选择器额外添加一个对应的属性选择器，使得样式只作用于含有该属性的dom——组件内部dom，防止组件之间的样式污染。

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

postcss 是一种对css编译的工具，通过内部插件实现功能
1 . 自动补全浏览器前缀 autoprefixer，
2 . 自动把px代为转换成rem，
3 . css 代码压缩等等。

打包编译后这个属性会变成这样：

<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、使用场景：

当我们开发一个页面使用了子组件的时候，如果这时候需要改子组件的样式，但是又不影响其他页面使用这个子组件的样式的时候

2、原理

scoped 样式中的一个选择器能够选择到子组件 或 后代组件中的元素
/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>

那么编译后的结果就会是：

<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;
}

因为Vue不会为深度作用选择器后面的选择器单元增加 属性选择器[data-v-实例标识]，所以，后面的选择器单元能够选择到子组件及后代组件中的元素