vue | scoped与深度选择器

若文章有任何纰漏或未涉及你想了解的内容，欢迎在评论提出，我会尽最快速度回复。

什么是scoped style

html scoped

scoped style最初是一个html5的特性。使用该属性，即为样式添加了作用域，使样式仅应用到 style 元素的父元素及其子元素上。
但仅有firefox支持，它的定义与使用详见html scoped。
这种scoped特性之所以没有被广泛使用，是因为其将样式写在html内部，很影响代码可读性和可维护性。在传统的面向页面开发时代，样式作用域的迫切性也并不是很高。

vue scoped

与html scoped类似的，vue引入了scoped style的概念。
它的作用是将声明样式的作用域限制于当前组件与子组件的根节点。它的实现方法是为html节点添加唯一序列标识，即使用特性选择器进行样式定义。
例：

<style scoped>
.target{
    
 color : royalblue
}
</style>

将被处理为

<style>
.target[data-v-7ba5bd90]{
      
 color : royalblue
}
</style>

为什么使用scoped style

MVVM框架的主要场景是面向组件的单页面应用开发（SPA）。
在SPA开发中，所有组件的CSS都会被打包挂载到单一页面（原理），因此尽管开发是组件化的，但CSS最终是混在一起的，组件间样式会相互污染。

• 为避免样式污染，我们有两种解决方法，而scoped style是其中一种，它的本质是CSS模块化。另一种是使用传统的class/id分类。

1. 像面向页面开发一样，使用唯一的class/id进行细粒度区分，除全局样式外，不使用元素选择器。
2. 使用scoped style使样式组件化。

• 两者的优劣：
  class与scoped style各有优劣，class分类简单原始，但在大项目开发中，容易出现标签冗余，就像bootstrap，可读性很差。而scoped style可以避免标签冗余，实现样式的组件化，但其性能稍逊，且遇到修改第三方UI库的场景时，需要使用深度选择器。

scoped style 详解