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

1. 作用域CSS

作用域CSS是Vue中一种处理样式作用范围的方案。它通过在组件中使用 <style scoped> 标签，将样式限定在当前组件的范围内，避免样式影响其他组件。

使用方式

在Vue组件的 <style> 标签中添加 scoped 属性，即可开启作用域CSS。

<template>
  <div class="scoped-demo">
    <p>Scoped CSS示例</p>
  </div>
</template>

<style scoped>
.scoped-demo {
  background-color: red;
}
</style>

工作原理

当一个组件使用了作用域CSS时，Vue会为该组件的所有样式选择器添加一个唯一的属性选择器。这样，组件中的样式只会应用于组件内部对应的元素，不会影响其他组件。

<div class="scoped-demo" data-v-f3f3eg9>
  <p data-v-f3f3eg9>Scoped CSS示例</p>
</div>

特点

• 样式只在当前组件中生效，不会污染全局样式。
• 通过添加属性选择器实现作用域效果。

2. CSS模块

CSS模块是Vue中另一种处理样式作用域的方案。它通过将样式文件分割成模块，每个模块都有一个唯一的类名（由css-loader自动生成），并且只在当前模块中应用。

使用方式

在使用CSS模块之前，需要安装 css-loader 和 vue-style-loader。然后，可以在Vue组件的 <style> 标签中使用 module 属性开启CSS模块。

<template>
  <div class="css-module-demo">
    <p class="red-text">CSS模块示例</p>
  </div>
</template>

<style module>
.css-module-demo {
  background-color: yellow;
}

.red-text {
  color: red;
}
</style>

工作原理

使用CSS模块后，Vue编译器将生成唯一的类名，并将该类名绑定到组件的对应元素上。在样式文件中，可以使用这个唯一的类名来选择对应的元素。

<div class="css-module-demo_13eafa" data-v-f3f3eg9>
  <p class="red-text_13eafa" data-v-f3f3eg9>CSS模块示例</p>
</div>

特点

• 每个模块都有一个唯一的类名，样式只在当前模块中生效，不会污染全局样式。
• 类名是动态生成的，可以避免命名冲突。

区别

1. 作用范围不同： 作用域CSS只在当前组件中生效，而CSS模块可以应用于整个项目中。
2. 类名生成方式不同： 作用域CSS是通过属性选择器将样式关联到元素上，而CSS模块是通过动态生成的类名来选择对应的元素。
3. 命名冲突处理方式不同： 作用域CSS不需要处理命名冲突，因为样式只在当前组件中生效；而CSS模块通过生成唯一的类名来避免命名冲突。

两条示例说明已在上述内容中展示，请参考上述内容中的示例代码。

总结：作用域CSS适用于解决单个组件内的样式作用范围问题，而CSS模块适用于解决整个项目中的样式作用范围问题，并且能够处理命名冲突。选择使用哪种方案取决于具体的需求和项目规模。