vue中的scoped与css module区别

1. scoped 简介

   原因：在vue中通常提倡使用scoped，因为scoped可以给vue当前页面添加作用域，避免全局样式污染。

   原理：scoped会借助PostCSS给元素的类目添加标识，如：

// 原类名
.name {
    color: 'red'
}
// 加scoped后
.name[data-v-57a879] {
    color: 'red'
}

虽然给每个类目家里标识，但是无法避免全局样式的污染。

2.css module 简介
原因：css module同scoped作用一样，可以添加作用域，避免样式污染

原理：css module会改变类名，把每个类目转变成独一无二的类目，如：

// 原类名
.name {
    color: 'red'
}
// 加module
.ComponentName__name__2Kxy {
  color: 'red';
}

3. css module 在vue中使用

$style 是命名空间
编译css module时，会把css中的选择器放到$style 这个命名空间里

<template>
    <div :class="$style.header"></div>
</template>
 
<style module>
    .header {
        color: #555;
    }
</style>

复杂的对象使用

<template>
    <div :class="[$style['header'],{[$style['active']]:(i === index)}"></div>
</template>
 
<style module>

</style>