阐述 Vue 3 中 “ 的 CSS 作用域实现原理，以及如何通过 :deep(), ::v-deep, :global() 进行样式穿透。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

大家好，我是你们今天的Vue.js样式魔法师，今天要跟大家聊聊Vue 3中 <style scoped> 的那些事儿，以及怎么用一些“黑魔法”让样式穿透组件的结界。

开场白：CSS，组件，和那些不得不说的故事

话说当年，Web开发的世界还是一片蛮荒，CSS就像自由的野马，到处乱窜，一不小心就会把整个页面的样式搞得一团糟。后来，组件化思想来了，英雄们纷纷开始用组件划分战场，CSS也想跟着分一杯羹，但问题来了：怎么才能让CSS只作用于当前的组件，而不会影响到其他的组件呢？

于是，Vue的 <style scoped> 诞生了，它就像一个神奇的结界，把CSS牢牢地限制在组件内部，让组件的样式不再互相干扰。

第一幕：<style scoped> 的结界是如何炼成的？

<style scoped> 的核心原理其实很简单，它通过在组件的DOM元素和CSS规则上都添加一个唯一的属性（通常是一个hash值）来实现样式的隔离。

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

<template>
  <div class="my-component">
    <h1>Hello, Scoped CSS!</h1>
    <p>This is a paragraph inside the component.</p>
  </div>
</template>

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

h1 {
  color: blue;
}

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

当Vue编译这个组件时，它会做以下几件事：

给组件的根元素（div.my-component）添加一个唯一的属性。 比如 data-v-f3f3eg9。
给 <style scoped> 里面的CSS规则也加上相应的属性选择器。

编译后的HTML大概会变成这样：

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

编译后的CSS大概会变成这样：

.my-component[data-v-f3f3eg9] {
  border: 1px solid red;
}

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

p[data-v-f3f3eg9] {
  font-size: 16px;
}

看到了吗？所有的CSS规则都加上了 [data-v-f3f3eg9] 这个属性选择器。这意味着这些样式只会应用到带有 data-v-f3f3eg9 属性的元素上，也就是当前组件的DOM元素及其子元素。

总结一下，<style scoped> 的实现原理可以概括为以下几点：

步骤	描述
1	Vue编译器为组件的根元素添加一个唯一的`data-v-xxxx`属性。
2	Vue编译器为`<style scoped>`中的CSS规则添加相应的属性选择器`[data-v-xxxx]`，确保样式只应用于带有该属性的元素。
3	渲染时，将带有`data-v-xxxx`属性的HTML元素插入到DOM中。
4	浏览器根据CSS选择器，将带有匹配属性的样式应用到对应的元素上。

第二幕：样式穿透的那些“黑魔法”：::v-deep, :deep(), :global()

虽然 <style scoped> 很好地解决了组件样式隔离的问题，但有时候我们还是需要让组件的样式能够影响到子组件或者全局的元素。这时候，就需要用到一些“黑魔法”了，也就是 ::v-deep, :deep(), 和 :global()。

1. ::v-deep (在Sass/Less等预处理器中使用)

::v-deep 是一个深度选择器，它可以穿透多层嵌套的子组件，修改它们的样式。注意，这个在原生 CSS 中并不存在，需要使用预处理器（如 Sass 或 Less）才支持。在Vue 3 中，推荐使用 :deep() 代替 ::v-deep。

假设我们有这样一个父组件：

<template>
  <div class="parent">
    <child-component />
  </div>
</template>

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

export default {
  components: {
    ChildComponent,
  },
};
</script>

<style scoped lang="scss">
.parent {
  background-color: lightblue;

  ::v-deep .child-element {
    color: red;
  }
}
</style>

以及这样一个子组件 (ChildComponent.vue)：

<template>
  <div class="child-component">
    <p class="child-element">This is a child element.</p>
  </div>
</template>

<style scoped>
.child-component {
  border: 1px solid green;
}
</style>

在这个例子中，父组件的样式使用了 ::v-deep .child-element，这意味着它可以穿透子组件的 <style scoped> 结界，将子组件中 .child-element 的颜色设置为红色。

2. :deep() (推荐使用)

:deep() 是 ::v-deep 的替代品，也是一种深度选择器，可以在原生CSS中使用。 Vue 3 推荐使用 :deep() 来代替 ::v-deep，因为它更符合CSS的标准，并且在所有环境中都能正常工作。

上面的例子可以改写成这样：

<template>
  <div class="parent">
    <child-component />
  </div>
</template>

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

export default {
  components: {
    ChildComponent,
  },
};
</script>

<style scoped>
.parent {
  background-color: lightblue;
}

.parent :deep(.child-element) {
  color: red;
}
</style>

效果和使用 ::v-deep 是一样的。需要注意的是，:deep() 选择器必须放在组件的样式选择器之后，例如 .parent :deep(.child-element)。

使用 :deep() 的一些注意事项：

:deep() 只能用于修改子组件的样式。
:deep() 会禁用当前组件的样式隔离，因为它会影响到子组件的样式。

3. :global()

:global() 可以让你的CSS规则变成全局样式，不受 <style scoped> 的限制。也就是说，它定义的样式会影响到整个应用。

举个例子：

<template>
  <div>
    <h1>This is a component.</h1>
    <p>This paragraph should have a global style.</p>
  </div>
</template>

<style scoped>
h1 {
  color: green;
}

:global(p) {
  font-style: italic;
}
</style>

在这个例子中，h1 的颜色会被设置为绿色，这是组件的局部样式。而 :global(p) 会将所有 <p> 元素的字体样式设置为斜体，这是一个全局样式。

使用 :global() 的一些注意事项：

:global() 会使你的CSS规则变成全局样式，所以要谨慎使用，避免造成全局样式污染。
尽量避免在组件中使用 :global()，除非你真的需要定义一些全局通用的样式。

表格总结：样式穿透的利器

选择器	描述	用途	注意事项
`::v-deep`	深度选择器，穿透多层嵌套的子组件。 (已不推荐使用，推荐使用 `:deep()` )	修改子组件的样式。	需要使用预处理器（如 Sass 或 Less）。
`:deep()`	深度选择器，穿透多层嵌套的子组件。 (推荐使用)	修改子组件的样式。	必须放在组件的样式选择器之后。会禁用当前组件的样式隔离。
`:global()`	将CSS规则变成全局样式，不受`<style scoped>`限制。	定义全局通用的样式。	谨慎使用，避免造成全局样式污染。

第三幕：样式穿透的实际应用场景

样式穿透并不是一个万能的工具，它应该在特定的场景下使用。下面是一些常见的应用场景：

修改第三方组件库的样式： 当你使用一个第三方组件库时，有时候需要修改它的默认样式。这时候，可以使用 :deep() 来穿透组件的样式，修改你想要修改的部分。

<template>
  <el-button type="primary">Primary Button</el-button>
</template>

<style scoped>
/* 修改 Element UI Button 的颜色 */
:deep(.el-button--primary) {
  background-color: purple;
  border-color: purple;
}
</style>

统一组件库的样式： 如果你的应用使用了多个组件库，并且你想让它们的样式保持一致，可以使用 :global() 来定义一些全局通用的样式。
```
<style scoped>
:global(.btn) {
  border-radius: 4px;
  padding: 8px 16px;
}
</style>
```

动态修改组件的样式： 有时候，你需要根据组件的状态动态地修改它的样式。这时候，可以使用 :deep() 来穿透组件的样式，并根据组件的状态来应用不同的样式。

<template>
  <div class="my-component" :class="{ 'is-active': isActive }">
    <p>This is a paragraph.</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: false,
    };
  },
};
</script>

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

.my-component.is-active :deep(p) {
  color: red;
}
</style>

第四幕：样式隔离的最佳实践

虽然样式穿透很强大，但滥用它可能会导致样式混乱和难以维护。因此，在实际开发中，应该遵循一些最佳实践：

尽量使用组件自身的CSS： 优先使用组件自身的 <style scoped> 来定义组件的样式。只有在确实需要修改子组件或全局的样式时，才考虑使用样式穿透。
避免过度使用样式穿透： 过度使用样式穿透会使你的CSS代码难以理解和维护。尽量减少样式穿透的使用，并使用清晰的命名和注释来解释你的代码。
使用CSS变量： CSS变量可以让你在不同的组件之间共享样式，而不需要使用样式穿透。这可以提高代码的可维护性和可重用性。
```
<style scoped>
:root {
  --primary-color: blue;
}

h1 {
  color: var(--primary-color);
}
</style>
```
使用CSS Modules： CSS Modules 是一种将CSS样式局部化的技术，它可以避免CSS样式的全局污染。 Vue CLI 支持 CSS Modules，你可以通过在 <style> 标签上添加 module 属性来启用它。
```
<template>
  <div :class="$style.myComponent">
    <h1>This is a component.</h1>
  </div>
</template>

<style module>
.myComponent {
  border: 1px solid black;
}

h1 {
  color: red;
}
</style>
```

结语：掌握样式魔法，打造优雅的Vue应用

好了，今天的Vue.js样式魔法讲座就到这里了。希望大家通过今天的学习，能够更好地理解 <style scoped> 的原理，掌握样式穿透的技巧，并遵循最佳实践，打造出优雅、可维护的Vue应用。记住，样式就像魔法，用得好能让你的应用焕发光彩，用不好则可能造成混乱和灾难。所以，请谨慎使用，并不断学习和实践，成为真正的Vue.js样式魔法师！

谢谢大家！

发表回复 取消回复

发表回复取消回复