Vue中的作用域CSS和CSS模块的区别

在Vue中，我们可以使用作用域CSS或CSS模块来为组件的样式添加作用域限制，避免了不同组件之间样式的冲突。在使用之前，我们需要了解两者的区别。

作用域CSS

作用域CSS是使用Vue自带的特殊选择器<style scoped></style>来实现。使用scoped属性可以将当前组件内的所有样式选择器都添加一个特殊的属性选择器，以确保它们只能作用于当前组件下的元素，而不影响父组件或子组件中相同选择器的样式。

示例：

<template>
  <div class="scoped-class">
    <p>该段文字应该是红色</p>
  </div>
</template>

<style scoped>
.scoped-class p {
  color: red;
}

/* 父组件中与子组件相同的选择器不会被影响 */
p {
  color: blue;
}
</style>

在上面的代码中，我们使用了scoped属性来限定了样式的作用域，并为.scoped-class中的所有<p>标签设置了颜色为红色，默认情况下应用到组件中的父组件中的<p>标签的颜色不会受到影响，因为这个<p>标签没有被限定在.scoped-class的作用域内。同时，下方的p标签中应该显示为蓝色。

CSS模块

CSS模块是在Vue CLI 3创建的项目中使用的一种全局作用域CSS的解决方案。在这种解决方案中，每个组件的样式都有自己的标识符。在HTML代码中，通过使用类似<div class="my-component__example">这样的类名来命名组件的样式，样式标识符中的__符号会自动地被编译成散列字符串，这就避免了不同组件之间样式的冲突。

示例：

/* my-component.vue 的样式代码 */

<style module>
.my-component__example {
  color: blue;
}
</style>

/* app.vue 的样式代码 */

<template>
  <div>
    <!-- 使用name指令附加class -->
    <my-component class="$style.example"></my-component>
  </div>
</template>

<style>
/* 根据所需样式引入my-component的样式 */
@import "@/components/my-component.vue";

/* 组件中.css模块输出 */
.example {
  /* 混入my-component中的样式 */
  @extend .my-component__example;

  background-color: yellow;
}
</style>

在上面的代码中，我们在my-component.vue文件中使用了CSS模块，为这个组件定义了一个名为.my-component__example的样式，并在访问它时使用了类似于$style.example这样的表达式。在父组件app.vue的样式中，我们import了my-component的样式，然后通过混入.my-component__example这个样式，起到了可复用的效果。

总结：

作用域CSS是Vue自带的轻量级解决方案，可以很好的处理组件内部的样式限定。CSS模块则是适合于项目中较大规模的组件化开发，通过对CSS的处理起到了更加细致的样式控制并且可复用性强。