Vue中对比scoped css和css module的区别

请看下面的攻略：

Vue中对比scoped css和css module的区别

scoped css

Vue的scoped css是一种将css限制在组件内部使用的方法。在Vue组件中，可以给style标签添加scoped属性，它会自动将该样式限制在组件内部使用。

<template>
  <div class="container">
    <h1>Hello World</h1>
  </div>
</template>

<style scoped>
.container {
  background-color: #fff;
  color: #333;
  margin: 2em;
  padding: 2em;
}
</style>

上面的样式会自动编译成这样：

<style>
.container[data-v-2f3feece] {
  background-color: #fff;
  color: #333;
  margin: 2em;
  padding: 2em;
}
</style>

可以看到，所有的class和id都会被加上一个唯一的“data-v-xxxxxx”属性，避免了同名样式之间的冲突。但是，scoped css并不能完全保证不出现样式冲突，因为如果组件之间的样式类名相同，那么这些样式就会被覆盖。所以，我们还需要使用BEM等方法命名class，来保证组件之间的样式不会相互影响。

css module

css module是一种更加灵活的定义样式的方式。它允许我们在Vue中使用模块化的样式表，每个样式都有一个唯一的名称。这样，我们就可以放心地使用相同的class名称，而避免相互之间产生冲突。

使用css module需要在Vue组件中指定一个:module属性，然后将样式表记号改为<style module>。

例如，有一个组件名为“HelloWorld”，它定义如下的样式表：

.container {
  background-color: #fff;
  color: #333;
  margin: 2em;
  padding: 2em;
}

我们可以将这个样式表改写成模块化的形式：

.container_default {
  background-color: #fff;
  color: #333;
  margin: 2em;
  padding: 2em;
}

/* 定义其他样式 */

最后，我们需要在组件中使用这个样式表：

<template>
  <div class="container_default">
    <h1>Hello World</h1>
  </div>
</template>

<style module>
/* 使用css module */
</style>

这样，组件在编译时，会自动为每个样式添加一个唯一的名称，这个名称将被包含在<style>标签的scope属性中。

<style>
.container_default_UOgPU {
  background-color: #fff;
  color: #333;
  margin: 2em;
  padding: 2em;
}
</style>

示例1

我们来看一个示例，假设我们有两个组件，它们都要使用一个名为“button”的样式。我们首先来看scoped css的实现方式：

<!-- buttonA组件使用scoped css -->
<template>
  <button class="button">Button A</button>
</template>

<style scoped>
.button {
  color: #fff;
  background-color: #f00;
  padding: 1em;
  border-radius: 10px;
}
</style>

<!-- buttonB组件使用scoped css -->
<template>
  <button class="button">Button B</button>
</template>

<style scoped>
.button {
  color: #fff;
  background-color: #00f;
  padding: 1em;
  border-radius: 10px;
}
</style>

可以看到，这两个组件都使用了相同的class名称“button”，但是由于scoped css，它们的样式是独立的，不会相互影响。如果我们删除scoped，那么这两个组件的class名称会发生冲突。

<!-- buttonA组件没有使用scoped css -->
<template>
  <button class="button">Button A</button>
</template>

<style>
.button {
  color: #fff;
  background-color: #f00;
  padding: 1em;
  border-radius: 10px;
}
</style>

<!-- buttonB组件没有使用scoped css -->
<template>
  <button class="button">Button B</button>
</template>

<style>
.button {
  color: #fff;
  background-color: #00f;
  padding: 1em;
  border-radius: 10px;
}
</style>

示例2

下面我们来看一下css module的实现方式。同样是两个组件，它们需要使用名为“button”的样式。使用css module的方式如下：

<!-- buttonA组件使用css module -->
<template>
  <button :class="$style.button">Button A</button>
</template>

<style module>
/* 组件级别的样式 */
.button {
  color: #fff;
  background-color: #f00;
  padding: 1em;
  border-radius: 10px;
}
</style>

<!-- buttonB组件使用css module -->
<template>
  <button :class="$style.button">Button B</button>
</template>

<style module>
/* 组件级别的样式 */
.button {
  color: #fff;
  background-color: #00f;
  padding: 1em;
  border-radius: 10px;
}
</style>

可以看到，这两个组件都使用了相同的class名称“button”，但是由于它们都是使用了不同的css module，它们的样式不会相互影响，而且它们的名称是唯一的，不会发生样式冲突。