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>

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

 

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

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

上一篇:#CSS 优先级权威指南 #一文彻底搞定CSS优先级


下一篇:js的防抖(debounce) 和 节流(throttling)