[Vue.js] 今天我学会了Scoped的使用以及样式穿透

1.简介

Vue中的属性隔离在Vue中Scoped是用来做样式隔离的，能够确保样式只在当前的组件内起作用。这意味着，在一个Vue组件中写的样式只会影响这个组件内的元素，并不会影响其他组件或者全局的样式。

使用很简单，只需要在style标签上，添加scoped关键字即可：

<template>
  <div>
    Hello, world!
  </div>
</template>


<style scoped>
div {
  background-color: yellow;
}
</style>

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

2.基本原理

可以概括为以下几个步骤：

1. 为当前组件模板的所有DOM节点添加相同的attribute，添加的属性和其他的scope不重复，比如data-v-123来表示它的唯一性；
2. 在每句css选择器的末尾（编译后生成的css语句）加一个当前组件的data属性选择器，比如div[data-v-123]来私有化样式；
3. 如果组件内部包含有其他组件，只会给其他组件的最外层标签加上这个data属性;

所以，经过Vue的处理，上面的代码将被转化为类似下面这样的代码：

<template>
  <div data-v-7ba5bd90>
    Hello, world!
  </div>
</template>


<style scoped>
div[data-v-7ba5bd90] {
  background-color: yellow;
}
</style>

我们可以在浏览器中进行验证：

总的来说，scoped可以保证当前样式只针对于当前组件，这样可以让我们的样式代码更加清晰、模块化，也更容易维护。

再举个例子，正好也可以验证下上面提到的scoped基本原理的第3点：

如果组件内部包含有其他组件，只会给其他组件的最外层标签加上这个data属性;

我们先创建一个NavBar.vue组件，里面只包含一个按钮和一个标题：

<template>
    <div class="container">
        <button>left</button>
        <div class="title">NavbarTitle</div>
    </div>
</template>

<style>
.container {
    display: flex;
    flex-direction: row;
}

.title {
    flex: 1;
    text-align: center;
}
</style>

然后在App.vue中使用该组件：

<template>
  <navbar></navbar>
  <div>AppVue</div>
</template>

<script>
import navbar from './components/NavBar.vue';

export default {
  components: {
    navbar
  }
};
</script>

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

运行之后，查看标签结构：

从上图中可以看到除了在App.vue中添加的div标签，NavBar组件的根标签div也加上了data-v-7ba5bd90，所以如果组件内部包含有其他组件，只会给其他组件的最外层标签加上这个data属性。

3.样式穿透

在使用Vue的Scoped样式时，有时候会遇到父组件无法直接操作子组件样式的情况，这就是所谓的scoped样式的穿透问题。

3.1 举例说明

我们可以将上面的那个例子进行修改，进行验证。 NavBar.vue:

<template>
    <div class="container">
        <button>left</button>
        <div class="title">NavbarTitle</div>
    </div>
</template>

<style>
.container {
    display: flex;
    flex-direction: row;
}

.title {
    flex: 1;
    text-align: center;
}
</style>

App.vue：

<template>
  <navbar></navbar>
  <div>AppVue</div>
</template>

<script>
import navbar from './components/NavBar.vue';

export default {
  components: {
    navbar
  }
};
</script>

<style scoped>
div {
  background-color: blue;
}

/// 新加的样式
div button {
  background-color: red;
}
</style>

基于上面的例子，我们在App.vue中新加了一个样式，想要修改NavBar组件中按钮的颜色。但是发现并没有起作用，究其原因是因为上面提到的，scoped只会给组件的最外层标签添加属性，并且在经过编译之后，CSS如下：

<style type="text/css">
div[data-v-7ba5bd90] {
  background-color: blue;
}
div button[data-v-7ba5bd90] {
  background-color: red;
}
</style>

但是我们的button还是之前的样式，并没有data-v-7ba5bd90这个属性，所以这个样式并不会起作用。

但是我们在项目开发中经常会遇到需要修改组件内标签样式的情况，这就需要使用深度作用选择器了。

3.2 深度作用选择器（Deep Selectors）

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

div >>> button {
  background-color: red;
}

或者
div /deep/ button {
  background-color: red;
}

然后我们在浏览器中看下其样式，发现和之前的有所改变，[data-v-7ba5bd90]放到了div后面，而不是button后面了：

<style type="text/css">
div[data-v-7ba5bd90] {
  background-color: blue;
}
div[data-v-7ba5bd90] button {
  background-color: red;
}
</style>

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

注意事项：

• 使用深度作用选择器虽然能够解决scoped样式的穿透问题，但是不要滥用，以免影响到其他组件的样式；另外，深度作用选择器的性能也会有一些影响；

4. 总结

在使用Vue中的Scoped样式时，我们需要知晓其原理，了解其优点和缺点，这样可以更好的去排查问题和提升工作效率。

优点：

• 样式私有化：更容易管理和维护样式，避免了样式的冲突和污染；
• 组件化开发：每个组件都有独立的样式，提高了代码的可维护性和复用性；

缺点：

• 样式权重增加：scoped样式会给每个样式增加特定的选择器属性，导致样式权重增加。可能会导致样式覆盖和继承方面的问题，需要更高的权重来覆盖scoped样式；
• 无法直接操作子组件内部样式：如果需要操作子组件内部样式，就需要用深度作用选择器或其他方式解决；
• 性能问题：使用scoped时，浏览器需要额外处理样式选择器；