你不知道的 Vue Style 黑魔法

摘要

Vue 的单文件组件（SFC）提供了一套强大的样式管理机制，帮助开发者在组件中实现样式的隔离、动态绑定和模块化管理。通过 scoped 属性、CSS Modules 和 v-bind() 动态样式绑定，Vue 的样式系统既灵活又高效，能够满足各种复杂的开发需求。

第一章：Scoped CSS 的作用域隔离

1.1 Scoped CSS 的基本原理

在 Vue 单文件组件中，<style scoped> 是一种常用的方式，用于限制样式的作用范围，防止样式污染全局环境。例如：

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

在编译时，PostCSS 会为每个组件生成一个唯一的属性标识符（如 data-v-f3f3eg9），并将样式选择器转换为以下形式：

.example[data-v-f3f3eg9] {
  color: red;
}

这种方式确保了样式只会影响当前组件内的元素，而不会影响其他组件。

1.2 穿透作用域的选择器

有时我们需要在父组件中修改子组件的样式，这时可以使用 :deep() 伪类选择器。例如：

.a :deep(.b) {
  background: rgba(255, 0, 0, 0.5);
}

编译后，这段代码会被转换为：

.a[data-v-f3f3eg9] .b {
  background: rgba(255, 0, 0, 0.5);
}

:deep() 的作用是让样式穿透到子组件中，但仍然保持一定的隔离性。

1.3 处理插槽样式

对于插槽内容（<slot>），我们可以使用 :slotted() 来定义样式。例如：

:slotted(div) {
  border: 2px solid black;
}

:slotted() 的作用是针对插槽中的内容应用样式，而不会影响插槽外部的元素。

如果需要定义全局样式，则可以使用 ```:global`：

:global(.ant-btn) {
  font-size: 16px;
}

看机会可试试

顺便吆喝一句，技术大厂，前/后端or测试捞人，待遇给的还可以~

第二章：CSS Modules 的模块化管理

2.1 CSS Modules 的基本用法

CSS Modules 是另一种实现样式隔离的方式，它通过将 class 名称哈希化来避免命名冲突。例如：

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

<style module>
.red {
  color: red;
}
</style>

编译后，red 类名会被转换为类似 ._3zyde4l1yATCOkgn-DBWEL 的唯一标识符，从而确保样式的独立性。

2.2 自定义 Module 名称

我们还可以为 CSS Modules 定义自定义名称，方便在多个样式模块之间切换。例如：

<style module="darkTheme">
.dark {
  background: #000;
}
</style>

在脚本中可以通过 useCssModule 方法访问这些模块：

const darkTheme = useCssModule('darkTheme');

第三章：动态样式的实现

3.1 使用 `v-bind()` 绑定动态样式

Vue 提供了 v-bind() 方法，允许我们在样式表中直接绑定 JavaScript 变量。例如：

<script setup>
const theme = ref({ color: 'red' });
</script>

<style scoped>
p {
  color: v-bind('theme.color');
}
</style>

编译后，这段代码会生成一个 CSS 变量，并将其注入到组件的根元素中：

p {
  color: var(--6b53742-color);
}

通过这种方式，我们可以实现样式的动态更新，而无需手动操作 DOM。

第四章：性能优化与注意事项

4.1 避免性能瓶颈

在使用 Scoped CSS 或 CSS Modules 时，应尽量避免使用过于复杂的选择器。例如：

/* 不推荐 */
div span p {
  color: red;
}

/* 推荐 */
.text {
  color: red;
}

复杂的选择器会增加样式计算的成本，尤其是在大型项目中。

4.2 注意递归组件的影响

在递归组件中，后代选择器可能会引发意外的样式覆盖问题。例如：

.parent .child {
  background: blue;
}

如果 .parent 和 .child 在递归结构中多次出现，样式规则可能会被重复应用，导致不可预期的结果。

总结

Vue 的样式系统提供了多种工具来帮助开发者管理组件样式：

Scoped CSS：适用于简单的样式隔离。
CSS Modules：适用于需要更高模块化的场景。
v-bind() ：适用于动态样式的实时绑定。

根据项目的具体需求，选择合适的工具和方法，可以让样式管理更加高效和灵活。无论是小型项目还是大型应用，Vue 的样式系统都能为你提供强有力的支持。

——转载自作者：mCell

摘要