Vue中的scoped和/deep/

scoped私有作用域

作用： 让当前样式只作用于当前组件而不污染全局，scoped通过使用 PostCSS 来实现以下转换：

<style scoped>
.example {
    color: red;
}
</style>
<template>
    <div class="example">hi</div>
</template>

转化为：

<style>
.example[data-v-f3f3eg9] {
    color: red;
}
</style>
<template>
    <div class="example" data-v-f3f3eg9>hi</div>
</template>

如何实现：
PostCSS 处理组件 scoped 样式时，给 HTML 的 DOM 节点加一个不重复属性 data-v-f3f3eg9 标志唯一性。如果组件内部还有组件，只会给当前的组件增加类似属性，不影响组件内部引用的组件。
缺点：
过度使用scoped会使页面打包体积过大。

/deep/深度作用选择器

作用：
在使用 scoped 属性后，达到了样式的组件隔离作用，但是如果引用它的父组件，想修改/增加其样式时，只能通过深度作用选择器来实现。