样式穿透，聊聊Vue中的scoped

什么是样式穿透

样式穿透是指一个组件的样式影响到另一个组件的样式。这通常是由于在组件的样式中使用了全局选择器或深度选择器导致的。

例如，假设我们有一个父组件和一个子组件。父组件的样式表中包含以下规则：

.parent {
  color: red;
}

子组件的样式表中包含以下规则：

.child {
  color: blue;
}

当我们把子组件放在父组件中时，子组件的文本颜色会变成红色，而不是蓝色。这是因为父组件的样式表中的.parent规则覆盖了子组件的样式表中的.child规则。

scoped属性

为了解决样式穿透问题，Vue提供了scoped属性。scoped属性可以将组件的样式隔离在组件内部，防止样式泄漏到组件外部。

要使用scoped属性，只需要在组件的<style>标签中添加scoped属性即可。例如：

<style scoped>
.parent {
  color: red;
}

.child {
  color: blue;
}
</style>

添加了scoped属性后，子组件的样式就不会影响到父组件的样式了。子组件的文本颜色会变成蓝色，而不是红色。

scoped属性的原理

scoped属性的工作原理是将组件的样式选择器加上一个唯一的标识符。这个标识符是根据组件的名称生成的。

例如，假设我们有一个名为MyComponent的组件。那么，组件的样式选择器就会加上MyComponent-这个标识符。

.MyComponent-parent {
  color: red;
}

.MyComponent-child {
  color: blue;
}

这样，子组件的样式选择器就变成了.MyComponent-child，父组件的样式选择器就变成了.MyComponent-parent。这两个选择器是互不影响的。

何时使用scoped属性

scoped属性非常有用，可以防止样式冲突和提高代码的可维护性。但是，scoped属性也有一个缺点，那就是它会降低CSS性能。这是因为浏览器在解析带有scoped属性的样式表时需要做更多的工作。

因此，我们应该只在需要的时候才使用scoped属性。如果一个组件的样式不会影响到其他组件，那么就没有必要使用scoped属性。

总结

scoped属性可以防止样式穿透，从而实现样式隔离。这对于避免样式冲突和提高代码的可维护性非常有用。但是，scoped属性也有一个缺点，那就是它会降低CSS性能。因此，我们应该只在需要的时候才使用scoped属性。