vue 中 Scoped Styles 是如何实现样式隔离的， 原理是啥？【热度: 244】

CSS美团

关键词：Scoped Styles 样式隔离

在 Vue 中，.vue 单文件组件的 <style> 标签可以添加一个 scoped 属性来实现样式的隔离。通过这个 scoped 属性，Vue 会确保样式只应用到当前组件的模板中，而不会泄漏到外部的其他组件中。

这个效果是通过 PostCSS 在构建过程中对 CSS 进行转换来实现的。基本原理如下：

Scoped Styles 的工作原理：

  1. 当你为 <style> 标签添加 scoped 属性时，Vue 的加载器（比如 vue-loader）会处理你的组件文件。

  2. vue-loader 使用 PostCSS 来处理 scoped 的 CSS。它为组件模板内的每个元素添加一个独特的属性（如 data-v-f3f3eg9）。这个属性是随机生成的，确保唯一性（是在 Vue 项目构建过程中的 hash 值）。

  3. 同时，所有的 CSS 规则都会被更新，以仅匹配带有相应属性选择器的元素。例如：如果你有一个 .button 类的样式规则，它会被转换成类似 .button[data-v-f3f3eg9] 的形式。这确保了样式只会被应用到拥有对应属性的 DOM 元素上。

示例

假设你在组件 MyComponent.vue 内写了如下代码：

<template>
  <button class="btn">Click Me</button>
</template>

<style scoped>
  .btn {
    background-color: blue;
  }
</style>

vue-loader 将处理上述代码，模板中的 <button> 可能会渲染成类似下面的 HTML：

<button class="btn" data-v-f3f3eg9>Click Me</button>

CSS 则会被转换成：

.btn[data-v-f3f3eg9] {
  background-color: blue;
}

因此，.btn 类的样式仅会应用于拥有 data-v-f3f3eg9 属性的 <button> 元素上。

注意：

  • Scoped styles 提供了样式封装，但不是绝对的隔离。子组件的根节点仍然会受到父组件的 scoped CSS 的影响。在子组件中使用 scoped 可以避免这种情况。
  • Scoped CSS 不防止全局样式影响组件。如果其他地方定义了全局样式，它们仍然会应用到组件中。
  • 当使用外部库的类名时，scoped 可能会导致样式不被应用，因为它会期望所有匹配规则的元素都带有特定的属性。

总的来说，Scoped Styles 是 Vue 单文件组件提供的一种方便且有效的样式封装方式，通过 PostCSS 转换和属性选择器来实现组件之间的样式隔离。