剖析 Vue 3 源码中 “ 的 CSS 作用域实现原理，特别是 `data-v-hash` 属性的生成和插入机制。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众老爷大家好！今天咱们来聊聊Vue 3里scoped这个小妖精背后的故事，看看它是怎么把CSS变成“私人定制”的，只对特定的组件生效。

开场白：CSS作用域，这块兵家必争之地

话说前端开发，最让人头疼的问题之一就是CSS样式冲突。大家都是全局作用域，稍不留神，你写的样式就把别人的样式给覆盖了，简直比宫斗剧还精彩。为了解决这个问题，各种CSS解决方案层出不穷，什么CSS Modules，BEM，Styled Components等等。但Vue的scoped属性，简单粗暴，效果拔群，堪称一股清流。

主角登场：data-v-hash，身份的象征

scoped的秘密武器，就是给元素加上一个data-v-hash属性。这个hash值，每个组件都是独一无二的，就像每个人的身份证号一样。有了这个hash值，CSS选择器就能精确地找到目标元素，避免误伤。

第一幕：编译时期的魔法

Vue的scoped属性，主要是在编译时期发挥作用。当Vue编译器遇到<style scoped>标签时，它会做两件事：

给组件内的所有元素加上data-v-hash属性。
修改CSS选择器，让它们只对带有特定data-v-hash属性的元素生效。

举个例子，假设我们有这样一个Vue组件：

<template>
  <div class="container">
    <h1>Hello, Scoped CSS!</h1>
    <p>This is a paragraph.</p>
  </div>
</template>

<style scoped>
.container {
  background-color: lightblue;
  padding: 20px;
}

h1 {
  color: darkblue;
}

p {
  font-size: 16px;
}
</style>

经过Vue编译器处理后，会变成这样（简化版，实际情况更复杂）：

<div class="container" data-v-f3f3eg9>
  <h1 data-v-f3f3eg9>Hello, Scoped CSS!</h1>
  <p data-v-f3f3eg9>This is a paragraph.</p>
</div>

<style>
.container[data-v-f3f3eg9] {
  background-color: lightblue;
  padding: 20px;
}

h1[data-v-f3f3eg9] {
  color: darkblue;
}

p[data-v-f3f3eg9] {
  font-size: 16px;
}
</style>

可以看到，所有的元素都被加上了data-v-f3f3eg9属性，而CSS选择器也变成了".container[data-v-f3f3eg9]"，"h1[data-v-f3f3eg9]"，"p[data-v-f3f3eg9]"。这样，这些样式就只会对这个组件内的元素生效，不会影响到其他组件。

第二幕：哈希值的生成

那么，这个data-v-hash属性的值是怎么生成的呢？Vue编译器会根据组件的内容（主要是<template>部分）生成一个唯一的哈希值。这个哈希值通常是一个简短的字符串，可以保证在同一个项目里，不同的组件生成的哈希值不会重复。

第三幕：vue-template-compiler的内部

要深入理解scoped的实现，我们需要稍微看一下vue-template-compiler的源码。虽然直接阅读源码比较枯燥，但我们可以了解一些关键的步骤：

解析模板： 编译器首先会解析Vue组件的<template>部分，生成一个抽象语法树（AST）。
遍历AST： 然后，编译器会遍历这个AST，找到所有的元素节点。
添加data-v-hash属性： 对于每一个元素节点，编译器会给它加上data-v-hash属性，属性值为组件的哈希值。
处理<style scoped>： 编译器会解析<style scoped>标签内的CSS代码，并修改CSS选择器，让它们只对带有特定data-v-hash属性的元素生效。

这个过程涉及到很多复杂的代码，但核心思想就是上面这几步。

表格：Vue scoped 的关键步骤

步骤	描述
1. 模板解析	`vue-template-compiler` 解析 Vue 组件的 `<template>` 部分，生成抽象语法树 (AST)。AST 是代码的树形表示，方便后续处理。
2. AST 遍历	编译器遍历 AST，查找所有的 HTML 元素节点。
3. 添加属性	对于每个 HTML 元素节点，编译器添加 `data-v-hash` 属性。这个属性的值是一个唯一的哈希值，基于组件的内容生成。例如，`<div class="container">` 变为 `<div class="container" data-v-f3f3eg9>`。
4. CSS 处理	编译器解析 `<style scoped>` 标签内的 CSS 代码。它会修改 CSS 选择器，确保它们只应用于具有相应 `data-v-hash` 属性的元素。例如，`.container` 变为 `.container[data-v-f3f3eg9]`。这意味着样式只应用于具有 `data-v-f3f3eg9` 属性的 `.container` 元素。

一些细节问题

后代选择器： 如果CSS选择器使用了后代选择器（例如".container h1"），编译器也会相应地修改它，让它只对带有特定data-v-hash属性的后代元素生效。例如，".container h1"会变成".container[data-v-f3f3eg9] h1[data-v-f3f3eg9]"。
全局选择器： 有时候，我们可能需要在scoped的样式中定义一些全局样式。可以使用::v-deep或者/deep/（已废弃）来穿透scoped作用域。例如：

<style scoped>
.container {
  /* ... */
}

.container ::v-deep .global-class {
  /* 全局样式 */
}
</style>

或者：

<style scoped>
.container {
  /* ... */
}

.container /deep/ .global-class {
  /* 全局样式 */
}
</style>

::v-deep 和 /deep/ 的作用是告诉编译器，这个选择器不受scoped的限制，可以穿透到子组件的内部。但需要注意的是，滥用::v-deep可能会破坏scoped的作用域，导致样式冲突。

::v-slotted / ::v-global / ::v-bind 这三个指令是 Vue 3.2+ 新增的，用于更精细地控制作用域。
- ::v-slotted：用于设置插槽内容的样式。
- ::v-global：用于声明全局样式。和不使用 scoped 属性效果类似，但可以和组件的其他 scoped 样式一起放在一个 <style> 块中。
- ::v-bind：允许将组件的 props 或 data 绑定到 CSS 变量，实现动态样式。

代码示例：::v-slotted

假设我们有一个组件，使用了插槽：

// MyComponent.vue
<template>
  <div class="my-component">
    <slot></slot>
  </div>
</template>

<style scoped>
.my-component {
  border: 1px solid black;
  padding: 10px;
}

::v-slotted(*) { /* 针对所有插槽内容 */
  color: red;
}

::v-slotted(p) { /* 针对 <p> 标签的插槽内容 */
  font-weight: bold;
}
</style>

// ParentComponent.vue
<template>
  <MyComponent>
    <p>This is slotted content.</p>
    <span>This is also slotted content.</span>
  </MyComponent>
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
  components: {
    MyComponent
  }
}
</script>

在这个例子中，::v-slotted(*) 会将所有插槽内容的颜色设置为红色，而 ::v-slotted(p) 会将 <p> 标签的插槽内容设置为粗体。

代码示例：::v-global

<template>
  <div class="my-component">
    <p class="global-paragraph">This is a paragraph.</p>
  </div>
</template>

<style scoped>
.my-component {
  border: 1px solid black;
  padding: 10px;
}

::v-global .global-paragraph {
  font-size: 20px;
  color: green;
}
</style>

.global-paragraph 样式会被应用到所有具有该类的元素，而不仅仅是 MyComponent 中的元素。

代码示例：::v-bind

<template>
  <div class="my-component" :style="{ '--dynamic-color': dynamicColor }">
    <p>This is a paragraph.</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dynamicColor: 'blue'
    };
  }
};
</script>

<style scoped>
.my-component {
  border: 1px solid black;
  padding: 10px;
  --dynamic-color: red; /* 默认值 */
}

p {
  color: v-bind(--dynamic-color);
}
</style>

这里，我们使用 :style 指令将 dynamicColor 数据绑定到 CSS 变量 --dynamic-color。在 CSS 中，我们使用 v-bind(--dynamic-color) 来引用这个变量，从而实现动态样式。如果 dynamicColor 的值为 ‘blue’，那么段落的颜色将变为蓝色。

deep 和Shadow DOM: Vue的scoped属性并不能穿透Shadow DOM。如果你的组件使用了Shadow DOM，那么scoped的样式将无法影响到Shadow DOM内部的元素。

优缺点分析

特性	优点	缺点
`scoped`	简单易用，自动生成`data-v-hash`属性，避免样式冲突。	增加了CSS选择器的复杂度，可能会影响性能。无法穿透Shadow DOM。
`::v-deep`	允许穿透scoped作用域，定义全局样式。	滥用可能会破坏scoped的作用域，导致样式冲突。
`::v-slotted`	可以针对插槽内容定义样式。	需要Vue 3.2+版本支持。
`::v-global`	可以在scoped样式中声明全局样式。	需要Vue 3.2+版本支持。
`::v-bind`	允许将组件的 props 或 data 绑定到 CSS 变量，实现动态样式。	需要Vue 3.2+版本支持。

性能考量

给元素加上data-v-hash属性，并修改CSS选择器，理论上会增加一些额外的开销。但实际上，这些开销通常可以忽略不计。因为现代浏览器对CSS选择器的优化已经非常成熟，可以高效地处理带有属性选择器的CSS规则。

当然，如果你的组件非常复杂，包含大量的元素和CSS规则，那么scoped可能会对性能产生一定的影响。但一般来说，只有在极端的场景下才会出现这种情况。

总结：scoped，一个优雅的解决方案

总而言之，Vue的scoped属性是一个非常优雅的CSS作用域解决方案。它简单易用，可以有效地避免样式冲突，提高开发效率。虽然它有一些缺点，但瑕不掩瑜，仍然是Vue开发中不可或缺的一部分。希望今天的讲解能帮助大家更好地理解scoped的原理和用法。

彩蛋：如何查看编译后的CSS？

想看看Vue编译器到底做了什么？很简单！打开你的浏览器的开发者工具，找到Elements面板，然后找到你的Vue组件对应的HTML元素。你会看到所有的元素都被加上了data-v-hash属性，而style标签里的CSS选择器也被修改了。

今天的讲座就到这里了。感谢各位的观看，下次再见！

发表回复 取消回复

发表回复取消回复