【Vue】Vue3.0样式隔离

在这里记录一下Vue3.0里面的样式隔离特性，在项目开发过程当中，有时候将样式单独提到了一个文件当中再引入到单组件文件当中，会导致没有样式隔离。

这里阅读Vue官方文档找到了解决办法。

一、scoped

我们了解到的最常见就是scoped，主要的原理是通过通过 PostCSS为元素添加自定义属性(data-xxx-xxx)，它的形式如下：

编译后的形式：

1.1 深度选择器

形式：:deep()伪类
作用：父组件的样式能够影响到子组件

1.2 插槽选择器

形式：:slotted()伪类
作用：组件样式可以影响到插槽插入的元素样式

1.3 全局选择器

形式：:global()伪类
作用：组件样式可以应用到全局

1.4 混合使用局部与全局样式

二、CSS Modules

Vue会将一个 \

得出的 class 将被哈希化以避免冲突，实现了同样的将 CSS 仅作用于当前组件的效果。

CSS Modules
css 模块化指的是就是：用url()或者@import导入的文件

在我们现在的构建工具里面，几乎都支持了对CSS Modules的处理，只要将文件命名改为xxx.module.css就可以，如果有预处理器改成相对应的名称即可。

三、CSS 中的 v-bind()

单文件组件的

这个语法同样也适用于

实际的值会被编译成哈希化的 CSS 自定义属性，因此 CSS 本身仍然是静态的。自定义属性会通过内联样式的方式应用到组件的根元素上，并且在源值变更的时候响应式地更新。