Vue中Scoped与深层覆盖

Scoped是什么

对于Vue开发人员来说Scoped是个在基础不过的问题了，当我们在当前组件的style样式上生命Scoped属性后，那么这个区域的style将只在当前组件生效。

Scoped为什么可以实现这样的功能

Vue中的Scoped主要是通过PostCss转译，在转译时，PostCSS给一个组件内的所有dom添加一个独一无二的动态属性，然后给css选择器额外添加一个对应的属性选择器，这样的编译方式可以使得该样式只适用于当前组件内部的dom。 如下所示：

编译前：

<el-select class="el-select-seek" v-model="select" placeholder="请选择"></el-select>

scss样式:

.el-select-seek {
    width: 100px;
    margin-right: 10px;
}

编译后：

<div data-v-57ea8b32="" class="el-select el-select-seek el-select--small"></div>

css样式：

.el-select-seek[data-v-57ea8b32] {
    width: 100px;
    margin-right: 10px;
}

深层覆盖

在实际开发中，尤其是ToB的业务中，前端大部分会选择一些较为成熟的UI框架作为基础进行开发，而在这样的开发形式下，必然会遇到要对组件内的样式进行修改的情况，而这样的修改实际上就是跨组件修改了。

深层覆盖的方式

关于深层覆盖的方法，大概有如下几种：

1. 全局样式覆盖，权重覆盖
2. 深度覆盖符号覆盖
3. 行内样式逻辑覆盖

全局样式覆盖

全局样式覆盖的方法，则是抛开scoped，在全局样式重置的文件内，通过权重值的计算，进行样式的覆盖，这种方法最好的用处是在规范全局样式的情况下，进行这样的覆盖。若是多人协同的项目，不推荐开发人员私自使用全局样式覆盖，以免引起不必要的bug。

深度覆盖覆盖覆盖

使用深层覆盖符号：>>>、/deep/、::v-deep， 在实际开发中 >>>与/deep/有失灵的情况，推荐使用::v-deep。

/deep/只需要在最外层进行声明，之后进行块级包裹即可。 如下所示：

scss样式：

::v-deep{
  .el-select-seek{
    height: 300px;
  }
}

编译后：

[data-v-57ea8b32] .el-select-seek {
     height: 300px;
}