scoped原理及使用

一、什么是scoped，为什么要用
在vue文件中的style标签上，有一个特殊的属性：scoped。
当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件，通过该属性，可以使得组件之间的样式不互相污染。

二、scoped的原理
1、为组件实例生成一个唯一标识，给组件中的每个标签对应的dom元素添加一个标签属性，data-v-xxxx
2、给<style scoped>中的每个选择器的最后一个元素添加一个属性选择器，原选择器[data-v-xxxx]，如：原选择器为.container #id div，则更改后选择器为.container #id div[data-v-xxxx]

注意:是加在最后一个元素上的！

//.a为大div父组件 .b为子组件根元素 .c为子组件内的子元素
 .a .b .c{//多层
    color:red
  }
  //会渲染成
  .a .b .c[data-v-2311c06a]{
    color:red
  }

三、示例
转译前的vue代码

<template>
	<div class="example">hello world</div>
</template>
<style scoped>
.example {
	color: red;
}
</style>

<template>
	<div class="example" data-v-49729759>hello world</div>
</template>
<style scoped>
.example[data-v-49729759] {
	color: red;
}
</style>

二: /deep/深度作用选择器
1.说明
通过上面的讲解，我们了解到scope主要通过文件指纹控制作用域范围。而针对每个样式的定义，只能出现一个文件指纹。我们看如下代码：

<template>
  <div class="container">
    <span>1111</span>
  </div>
</template>
<script lang=ts setup>
</script>
<style lang=scss scoped>
.container{
    background-color: lightblue;
    width: 100px;
    height: 100px;
    .abc{
        background-color: #fff;
        .def{
            color: red;
        }
    }
}
</style>

这里我们使用的是scss语法，我们看一下编译后的呈现形式：

通过截图我们发现会在每个样式后面都加上一个文件指纹的属性。
那我现在有个需求，我想把文件指纹加到中间该怎么办呢？此时，v-deep就派上用途了。看下面代码：

<template>
  <div class="container">
    <span>1111</span>
  </div>
</template>
<script lang=ts setup>
</script>
<style lang=scss scoped>
.container{
    background-color: lightblue;
    width: 100px;
    height: 100px;
    ::v-deep.abc{
        background-color: #fff;
        .def{
            color: red;
        }
    }
}
</style>

其实/deep/ 编译后的结果将会是一个属性选择器

2. 案例
通过上面的讲解，那他究竟有什么作用呢?下面我们通过一个案例体会他的真正作用。
再vue的世界中，我们很多时候会使用第三方库，比如element-ui等。如果我想该里面的样式，之前好多同事会把样式放到全局中，这样显而易见容易污染其他的元素,此时，/deep/就会大显身手。

我们暂时选择ant-design库作为测试。
index.vue

<template>
  <div class="container">
    <a-checkbox class="check" v-model:checked="checked">Checkbox</a-checkbox>
  </div>
</template>

<script lang=ts setup>
import { ref } from 'vue';
const checked = ref(true)
</script>

<style lang=scss scoped>
.container{
    background-color: lightblue;
    width: 500px;
    height: 510px;
}
</style>

此时，我们看一下生成的代码片段：


假如我现在有个需求，想把复选框中间的蓝色变成红色，很容易想到需求修改ant-checkbox-inner的样式，如下代码：

<style lang=scss scoped>
.container{
    background-color: lightblue;
    width: 500px;
    height: 510px;
    .check{
      .ant-checkbox-inner{
        background-color: red;
      }
    }
}
</style>

然而，并没有生效，我们看一下生成的代码：

我们发现在ant-checkbox-inner后面加了一个文件指纹。而实际这是第三方库(也就是已经打包好的文件)，里面的标签根本不会出现文件指纹。这样就导致我们写的样式文件不能作用于ant-checkbox-inner上。此时，我们很容易想到要把样式变成全局。

<style lang=scss>
.container{
    background-color: lightblue;
    width: 500px;
    height: 510px;
    .check{
      .ant-checkbox-inner{
        background-color: red;
      }
    }
}
</style>

虽然样式生效了，但是出现了最严重的问题，它会污染到其他vue组件使用的checkbox组件。此时v-deep就登场了。代码如下：

<style lang=scss scoped>
.container{
    background-color: lightblue;
    width: 500px;
    height: 510px;
    .check{
      /deep/ .ant-checkbox-inner{
        background-color: red;
      }
    }
}
</style>

再看样式表，发现给check加了文件指纹，check是我们vue组件的标签，因此编译的时候会加上文件指纹。这样就完美解决了问题。