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-实例标识]，所以，后面的选择器单元能够选择到子组件及后代组件中的元素
