【Vue】Vue3.0样式隔离

在这里记录一下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 本身仍然是静态的。自定义属性会通过内联样式的方式应用到组件的根元素上，并且在源值变更的时候响应式地更新。