vue scoped原理

vue scoped生成带hash attitude的html，css使用hash attr的属性选择器保持唯一性。

例如：

<div class="example">hi</div>

.example { color: red; }

生成：

<div class="example" data-v-df38f3e>hi</div>

.example[data-v-df38f3e] {color: red;}

这个和css module不同，css module是直接生成带hash后缀的class，webpack的css-loader对css module有直接的支持，开启即可

<button class="button--base-daf62 button--normal-abc53">Submit</button>

1. vue scoped的穿透

.a >>> .b {} 或者 .a /deep/ .b {} (/deep/写法可以防止某些编译器不支持>>>)

会生成：

.a[data-v-f3f3eg9] .b { /* ... */ }

2. vue scoped的取舍

vue scoped生成的hash会增大文件体积，而且属性选择器权重较高，覆写样式不方便，谨慎使用。