在这里记录一下Vue3.0里面的样式隔离特性，在项目开发过程当中，有时候将样式单独提到了一个文件当中再引入到单组件文件当中，会导致没有样式隔离。
这里阅读Vue官方文档找到了解决办法。
一、scoped
我们了解到的最常见就是scoped，主要的原理是通过通过 PostCSS为元素添加自定义属性(data-xxx-xxx)，它的形式如下：
<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>
1.1 深度选择器
形式：:deep()伪类
作用：父组件的样式能够影响到子组件
1.2 插槽选择器
形式：:slotted()伪类
作用：组件样式可以影响到插槽插入的元素样式
1.3 全局选择器
形式：:global()伪类
作用：组件样式可以应用到全局
1.4 混合使用局部与全局样式
<style>
/* 全局样式 */
</style>
<style scoped>
/* 局部样式 */
</style>
二、CSS Modules
Vue会将一个 \<style module> 标签会被编译为 CSS Modules 并且将生成的 CSS class 作为 $style 对象暴露给组件：
<template>
<p :class="$style.red">This should be red</p>
</template>
<style module>
.red {
color: red;
}
</style>
得出的 class 将被哈希化以避免冲突，实现了同样的将 CSS 仅作用于当前组件的效果。
CSS Modules
css 模块化指的是就是：用url()或者@import导入的文件
在我们现在的构建工具里面，几乎都支持了对CSS Modules的处理，只要将文件命名改为xxx.module.css就可以，如果有预处理器改成相对应的名称即可。
三、CSS 中的 v-bind()
单文件组件的 <style> 标签支持使用 v-bind CSS 函数将 CSS 的值链接到动态的组件状态：
<template>
<div class="text">hello</div>
</template>
<script>
export default {
data() {
return {
color: 'red'
}
}
}
</script>
<style>
.text {
color: v-bind(color);
}
</style>
这个语法同样也适用于 <script setup>，且支持 JavaScript 表达式 (需要用引号包裹起来)：
<script setup>
const theme = {
color: 'red'
}
</script>
<template>
<p>hello</p>
</template>
<style scoped>
p {
color: v-bind('theme.color');
}
</style>
实际的值会被编译成哈希化的 CSS 自定义属性，因此 CSS 本身仍然是静态的。自定义属性会通过内联样式的方式应用到组件的根元素上，并且在源值变更的时候响应式地更新。
