vue中css作用域的实现原理_vue中css的scoped私有作用域和深度选择器

使用vue开发项目的时候，当在

编译前代码：

.example{color:red;

}

编译后代码：

}

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

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

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

.parent >>> .child{ /*...*/ }

上述代码将会编译成：

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

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

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