vue <style>标签的scoped 属性

2022-07-24 08:48:56
        大家都知道当 <style> 标签有 scoped 属性时表示它的样式作用于当下的模块,很好的实现了样式私有化的目的。那么他是怎么实现的呢,大家看一下编译前后的代码就明白了:

编译前:

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

编译后:

<style>
.example[data-v-f3f3eg9] {
color: red;
}
        vue通过在DOM结构以及css样式上加唯一不重复的标记,其实就是在你写的组件的样式上添加了一个属性而已,以保证唯一,这样就实现了所谓的私有作用域。
但是也会有弊端:
一、考虑到浏览器渲染各种 CSS 选择器的方式,当 p { color: red } 设置了作用域时 (即与特性选择器组合使用时) 会慢很多倍。如果你使用 class 或者 id 取而代之,比如 .example { color: red },性能影响就会消除。所以,在你的样式里,进来避免直接使用标签,取而代之的你可以给标签起个class名。
二、同时也存在一个新的问题---样式不易(可)修改,而很多时候,我们是需要对公共组件的样式做微调的。(scoped设计的初衷就是不能让当前组件的样式修改其他任何地方的样式)
三、大家都知道css样式有一个优先级的说法,scoped的这一操作,虽然达到了组件样式模块化的目的,但是会造成一种后果:每个样式的权重加重了:理论上我们要去修改这个样式,需要更高的权重去覆盖这个样式。css样式优先级参考:https://www.jianshu.com/p/f4df99cc662e
        如果你希望 scoped 样式中的一个选择器能够作用或者说作用的“更深”,例如影响子组件,你可以使用 >>> 操作符:
>>>.el-table td, .el-table th {
    padding: 8px 0;
}
上述代码将会编译成:
[data-v-7c12301b] .el-table td, .el-table th[data-v-7c12301b] {
    padding: 8px 0;
}
而对于less或者sass等预编译,是不支持>>>操作符的,可以使用/deep/来替换>>>操作符,例如:
/deep/ .el-table td, .el-table th {
    padding: 8px 0;
}
  • 作者:灵活的小胖zhi
  • 原文链接:https://blog.csdn.net/hejingfang123/article/details/119392596
    更新时间:2022-07-24 08:48:56