style 加 scoped 属性的原理

Vue 中 scoped style 的实现原理，主要利用了 vue-loader、vue-template-compiler、postcss 等插件，根据文件的相对路径，并对其进行 hash 计算， 得到的 hash 值作为 scopeId，在 HTML 标签上添加一个 data-v-${scopeId} 属性，在 CSS 选择器叠加一层属性选择器 selector[data-v-${scopeId}] 以实现样式的局部化和私有化。

使用 scoped 后，父组件的样式将不会渗透到子组件中。如果希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，可以使用深度作用选择器，如 >>> 操作符（在预处理器无法正确解析 >>>，可以使用 /deep/ 或 ::v-deep 操作符取而代之）。如：

<style scoped>
  .a >>> .b {
    /* ... */
  }
</style>

将会编译成：

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