Vue中Scoped样式：优雅解决组件化开发中的样式隔离问题

1. Scoped 的原理

在 Vue 中，Scoped 样式是一种很棒的特性，能够确保你的样式只在当前组件内起作用。这意味着，你在一个 Vue 组件中写的样式只会影响这个组件内的元素，而不会影响其他组件或者全局的样式。那么，让我们来简单明了地了解一下 Scoped 样式是怎么实现的吧！

1.1 Vue Scoped 的基本原理

首先，Vue 会给你的组件的根元素（通常是 <div>）添加一个独一无二的标识属性，比如说 data-v-xxx。这个 xxx 是一个特殊的标识，用来确保你的样式只对这个组件有效。

其次，Vue 会对你在组件中写的样式做一些特殊处理。比如说，你写了这样一个样式 .container，在编译的时候，Vue 会把它变成 .container[data-v-xxx]。这样一来，这个样式就只会作用于有着相同标识的元素，也就是说，只会影响当前组件内的元素，其他地方不受影响。

这样一来，每个组件的样式都被限制在了自己的范围内，不会互相干扰，也不会跟全局的样式冲突。这就是 Scoped 样式的基本原理啦！

1.2 Vue Loader 如何处理 Scoped 样式

在 Vue 项目中，Vue Loader 是负责处理 .vue 文件的工具。它会把你写在 <style scoped> 里面的样式代码拿出来，然后做一些特殊的处理。

首先，Vue Loader 会给每个样式块生成一个特殊的标识，保证每个组件的样式都是唯一的。

然后，它会处理你的样式代码，把选择器末尾加上对应的标识，变成适用于当前组件的格式。

通过 Vue Loader 的处理，Scoped 样式就能够在每个组件里正常工作啦！它们能够保持样式私有，不影响其他地方，让我们的代码更加整洁清晰。

所以，这就是 Vue Scoped 样式的原理啦！简单易懂吧？

2. Scoped 的使用方法

好了，现在我们已经了解了 Scoped 样式的原理，接下来让我们看看如何在实际开发中使用 Scoped 样式吧！使用 Scoped 样式非常简单，让我来给你详细解释一下。

2.1 在 Vue 组件中声明 Scoped 样式

要在 Vue 组件中使用 Scoped 样式，你只需要在 <style> 标签中添加一个 scoped 属性即可。比如说：

<template>
  <div class="container">
    <p>这是一个 Scoped 样式的例子。</p>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
}
</script>

<style scoped>
.container {
  background-color: lightblue;
}
p {
  color: blue;
}
</style>

在这个例子中，我们给 <style> 标签添加了 scoped 属性，这样里面的样式就只会影响到当前组件内的元素了。比如 .container 类的背景颜色只会作用于这个组件内部的元素，而不会影响到其他地方的样式。

2.2 Scoped 样式的语法和特点

Scoped 样式的语法和普通的 CSS 是一样的，你可以像平常一样写样式，但是只会作用于当前组件内的元素。同时，Scoped 样式还具有以下特点：

只对当前组件内部的元素起作用，不会影响到其他组件或全局样式。
给 HTML 标签和 CSS 选择器添加了特殊的属性，保证了样式的唯一性和私有性。

通过这些特点，Scoped 样式让我们的样式代码更加清晰、模块化，也更容易维护。

3. 解决 Scoped 样式的穿透问题

在使用 Vue 的 Scoped 样式时，有时会遇到父组件无法直接操作子组件样式的情况，这就是所谓的 Scoped 样式的穿透问题。别担心，我们可以通过一些特殊的方式来解决这个问题，让我来为你详细介绍一下。

3.1 使用深度作用选择器（Deep Selectors）

Vue 提供了深度作用选择器，能够穿透 Scoped 样式，直接影响子组件内部的样式。你可以在父组件中使用 >>> 或者 /deep/ 来表示深度作用选择器，然后在后面跟上你要修改的子组件内部的样式。比如：

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

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

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent,
  }
}
</script>

<style scoped>
/* 这里的样式不会影响到子组件内部的样式 */
</style>

<style scoped>
/* 使用深度作用选择器，可以直接影响到子组件内部的样式 */
.parent >>> .child {
  color: red;
}
/* 或者使用 /deep/ 也是一样的效果 */
.parent /deep/ .child {
  color: red;
}
</style>

通过这种方式，我们就能够解决 Scoped 样式的穿透问题，直接修改子组件内部的样式，而不会受到 Scoped 样式的限制。

3.2 注意事项

使用深度作用选择器虽然能够解决 Scoped 样式的穿透问题，但是需要注意不要滥用，以免影响到其他组件的样式。
另外，深度作用选择器的性能可能会受到一些影响，所以在实际开发中，尽量只在必要的情况下使用。

4. Scoped 样式的优缺点

在使用 Vue 中的 Scoped 样式时，我们需要了解其优点和缺点，以便更好地评估何时使用它。下面我们来看一下 Scoped 样式的优缺点。

4.1 优点

样式私有化: Scoped 样式确保了样式只在当前组件内起作用，不会影响到其他组件或全局样式。这样一来，我们就可以更容易地管理和维护样式，避免了样式的冲突和污染。
组件化开发: Scoped 样式与 Vue 的组件化开发理念相契合，使得每个组件都可以拥有独立的样式，进一步提高了代码的可维护性和复用性。同时，Scoped 样式也促进了组件之间的解耦，降低了代码的耦合度。
提高开发效率: Scoped 样式使得我们可以更加专注于当前组件的样式设计，不必过多地考虑全局样式的影响。这有助于加快开发速度，减少不必要的样式调试和冲突处理时间。

4.2 缺点

样式权重增加: Scoped 样式会给每个样式增加特定的选择器属性，导致了样式的权重增加。这可能会导致样式覆盖和继承方面的问题，需要更高的权重来覆盖 Scoped 样式。
无法直接操作子组件样式: Scoped 样式限制了父组件对子组件样式的直接操作。如果需要修改子组件内部的样式，就需要使用深度作用选择器或其他特殊方式来解决。
性能问题: 使用 Scoped 样式时，浏览器需要额外处理样式选择器，可能会对性能产生一定影响。尤其是当使用标签选择器时，性能下降更为显著。

原文链接：https://juejin.cn/post/7333535323932082227 作者：至臻