[Vue]Scoped Css与Css Modules的区别

均为解决CSS全局作用域问题（样式冲突（污染））的一个解决方案。

1.Scoped CSS

当 <style> 标签有 scoped 属性时，相当于在元素中添加了一个唯一属性用来区分。

<style scoped>
.example {
  color: red;
}
</style>

<template>
  <div class="example">hi</div>
</template>

它通过使用 PostCSS 来实现以下转换，转换结果：

<style>
.example[data-v-f3f3eg9] {
  color: red;
}
</style>

<template>
  <div class="example" data-v-f3f3eg9>hi</div>
</template>

2.CSS Modules

通过给样式名加hash字符串后缀的方式，实现特定作用域语境中的样式编译后的样式在全局唯一。

<template>
 <p :class="$style.gray">
 Im gray
 </p>
</template>
<style module>
.gray {
 color: gray;
}
</style>

使用module的结果编译如下：

<p class="gray_3FI3s6uz">Im gray</p>
.gray_3FI3s6uz {
 color: gray;
}

由此可见，css module直接替换了类名，排除了用户设置类名影响组件样式的可能性。

推荐使用CSS Modules

详细见官方文档：https://vue-loader.vuejs.org/zh/guide/scoped-css.html#混用本地和全局样式