## 什么是socped * style 标签上的一个属性 * 实现样式模块化，不污染全局样式 ## 原理 源代码： ``` <template> <div class="example">scoped测试案例</div> </template> <style scoped> .example{ color:red; } </style> ``` 转译后的代码 ``` <template> <div class="example" data-v-5558831a>scoped测试案例</div> </template> <style scoped> .example[data-v-5558831a]{ color:red; } </style> ``` * 给 html 元素增加一个自定义属性，保证唯一 * 在css选择器后面，增加一个属性选择器，保证可以找到这个 dom 元素，来私有化样式，增加原css选择器的权重 * 如果组件内部包含有其他组件，只会给其他组件的最外层标签加上当前组件的data属性 ## 坑点 虽然解决了样式私有化的问题，但是会是样式不容易修改。 举个🌰： 1. 比如一个公共的button组件，使用了scoped属性。当其他组件引用button组件时，由于scoped增加了css的权重，无法直接修改button组件内部的样式。 2. 两个scoped 的组件嵌套在一起时的情况，增加被嵌套组件的权重  ### 解决办法 * 使用深度选择器 * 再添加一个style标签，用于全局样式的修改