在写vue组件的时候，style可以添加scoped属性，这属性到底干了哪些事情，会有哪些作用和影响呢？
1. 在style标签上添加scoped属性，这张样式表被编译之后，其生成的样式class会添加一个hash值（实际上是一个属性选择器）
如：
.v-customer{
color:red;
}
编译后成为：
.v-customer[data-v-123456] {
color:red;
}
2. 同时，组件渲染出来的html标签，如果用过这张样式表里的class，则会添加一个相同hash值的原生data-*标签属性（attribute）
如：<span data-v-123456 class="v-customer">xxx</span>
当样式有多级嵌套，hash值只会加在最底层的class上
如：
.v-customer {
color:red;
._ccc {
color:red;
}
}
编译后:
.v-customer[data-v-123456] {
color:red;
}
.v-customer ._ccc[data-v-123456] {
color:red
}
3. 带hash值的样式只对有着相同的hash值的html标签生效
4.每个组件（类）都有唯一的hash值，一个组件的多个实例有着相同的hash值
5. 这种带hash值的样式，其优先级会比相同的、不带hash值的样式要高,其实是相当于增加了一层属性选择器的权重
css优先级关系：内联样式 > ID 选择器 > 类选择器>属性选择器 > 伪类选择器 > 标签选择器 >伪元素选择器
如：
<style scpoed>
.v-customer {
._ccc {
color:red;
}
}
</style>
<style >
.v-customer {
div {
._ccc {
color:red;
}
}
}
</style>
这样编译出来的样式为
.v-customer ._ccc[data-v-123456] {
color:red
}
.v-customer div ._ccc{
color:red
}
从权重可以看出属性选择器的权重高于标签选择器，因此，上面的样式的优先级会更高
又如：
<style scpoed>
.v-customer {
._ccc {
color:red;
}
}
</style>
<style >
.v-customer {
.cus {
._ccc {
color:red;
}
}
}
</style>
从权重可以看出类选择器的权重高于属性选择器，因此，下面的样式的优先级会更高
总结
1 . scoped的组件样式并不是不可覆盖的，只要外面的样式优先级足够，还是可以覆盖的
2. scoped的样式只对当前组件生效，因此不会污染其他组件和子组件
3.scoped 的style里的样式如果想让他成为不带hash的样式以便子组件使用，可以使用 /deep/，这会使编译产生的class不带hash
如 ：
<style scpoed>
.v-customer {
/deep/ ._ccc {
color:red;
}
}
</style>
编译之后为：
.v-customer ._ccc {
color:red;
}
被/deep/ 修饰过的class及其子class都不会被加上hash
