vue中css的scoped私有作用域和深度选择器

使用vue开发项目的时候，当在<style>标签中有scoped属性时，就意味着这部分的css样式只作用于当前组件中的元素。这看起来好像很高深的样子，单实现的原理其实很简单，只要看一下编译前后的代码就能明白了。

编译前代码：

<style scoped>
    .example {
        color: red;
    }
</style>

编译后代码：

<style>
    .example[data-v-f3f3eg9] {
        color: red;
    }
</style>

从编译前后的代码可以很容易地看出，scoped的底层机制其实是在写的组件的样式中添加了一个额外的属性而已，通过这种形式就能实现所谓的私有作用域。

但是这种方式也会有弊端，比如说渲染性能问题。考虑到浏览器在渲染各种css选择器的方式的差异性，当 p { color: red } 这样的元素（标签）选择器设置了作用域时（即与特性选择器组合使用时）会比没有设置作用域时慢很多倍。但是如果使用类选择器或者id选择器取而代之的话，比如 .example { color: red } ，性能影响却会消除。所以，在定义scoped样式的时候，应该避免直接使用元素（标签）选择器，取而代之的是给元素另外加上class，有效避免性能问题的产生。

如果你希望scoped样式中的一个选择器能够作用得更深层次，例如影响子组件，你可以使用【>>>】操作符修饰选择器，被修饰的选择器这时候被称为深度选择器。

<style scoped>
    .parent >>> .child { /* ... */ }
</style>

上述代码将会编译成：

<style>
    .parent[data-v-f3f3eg9] .child { /* ... */ }
</style>

而对于less或者sass等预编译，是不支持【>>>】操作符的，可以使用【/deep/】来替换【>>>】操作符，例如：

<style>
    .parent /deep/ .child { /* ... */ }
</style>

另外深度选择器也可以用于解决一些修改组件库样式不生效的问题，原理同样是加上了编译后属性去匹配新的样式，但是选择使用深度选择器的时候要考虑浏览器的兼容问题，一些古老的浏览器可能是不支持这一特性的。

 

"人的感情很微妙，没有直白的表达，并不代表没有感情。"