scoped

在vue中，因?yàn)榻M件化的緣故，我們需要使用到樣式隔離來避免樣式的污染和沖突。目前使用比較多的還是在style上添加scoped屬性。該方式是通過給同一組件下的元素添加相同的自定義屬性hash值才實(shí)現(xiàn)樣式的私有化

<div class="cutom_box" data-v-5hc9jk3pw>
  <p data-v-7eb2bc79>Hello World!</p>
</div>

.cutom_box[data-v-5hc9jk3pw] {
  width: 100%;
}
.cutom_box p[data-v-5hc9jk3pw] {
  color: #333;
  font-size: 12px;
}

CSS Module

除了scoped之外，我們還可以使用css module的方式，通過在style標(biāo)簽上添加module屬性來實(shí)現(xiàn)樣式的私有化。
該方式是直接將代碼編譯為CSS Modules

/* 案例來自阮一峰老師的博文《CSS Modules 用法教程》 */
/* https://www.ruanyifeng.com/blog/2016/06/css_modules.html */

/* 編譯前 */
.title {
  color: red;
}

/* 編譯后 */
._3zyde4l1yATCOkgn-DBWEL {
  color: red;
}

<template>
  <p :class="$style.customColor">Hello World!</p>
</template>

<style module>
.customColor {
  color: #ff0000;
}
</style>

注意：

1. 單純使用<style module>的時(shí)候，默認(rèn)綁定到 style.customColor來引用，如果CSS類名是custom-color這樣的，則需要通過 $style['custom-color'] 來引用。
2. 也可以給style module添加一個命名，這樣就可以通過 變量名來操作

/* 命名的CSS Module */
<template>
  <p :class="customModule.customColor">Hello World!</p>
</template>

<style module="customModule">
.customColor {
  color: #ff0000;
}
</style>

useCssModule

vue3提供的Composition API - useCssModule，用來在setup函數(shù)或者<script setup></script>標(biāo)簽內(nèi)訪問CSS Module。(只可以在setup內(nèi)使用)

<template>
  <p :class="$style.customColor"></p>
</template>

<script setup lang="ts">
import {  useCssModule } from 'vue'
const styleModule = useCssModule()
console.log('> styleModule:', styleModule)
</script>

<style module>
.customColor {
  color: #ff0000;
}
</style>

<template>
  <p :class="customModule.customColor"></p>
</template>

<script setup lang="ts">
import {  useCssModule } from 'vue'
//如果是命名過的CSS Module，則需要傳入具體的module名稱才能獲取到
const styleModule = useCssModule('customModule')
console.log('> styleModule:', styleModule)
</script>

<style module="customModule">
.customColor {
  color: #ff0000;
}
</style>

使用CSS Module可以更精確的隔離組件的樣式，避免樣式污染。但大部分情況通過scoped基本可以實(shí)現(xiàn)樣式隔離，所以根據(jù)項(xiàng)目需求實(shí)際情況來選擇
參考：阮一峰老師的CSS Module