先来看一个例子
scoped 写法
<style scoped>
h1 {
color: #f00;
}
</style>
. 使用scoped 编译结果如下
h1[data-v-4c3b6c1c] {
color: #f00;
}
只是在元素中添加了一个唯一属性来区分
- 他的缺点有哪些呢?
1、 如果用户在别处定义了相同的类名，也许还是会影响到组件的样式
2、 据css样式优先级的特性，scoped这种处理会造成每个样式的权重加重了：
即理论上我们要去修改这个样式，需要更高的权重去覆盖这个样式。
所以在引用包含scoped的第三方插件时如若需要修改样式则需要全局修改，而且要注意权重问题，0.0迫不得已再使用!important。
3、 如果组件内部包含有其他组件，只会给其他组件的最外层标签加上当前组件的data属性：
所以一般父组件如果加了scoped，会比已经设置过自己样式的子组件内除最外层标签的内层标签的权重低，影响不到他们的样式。
深度作用选择器
如果你希望 scoped 样式中的一个选择器能够作用得
更深， 列如影响子组件，你可以使用 >>> 操作符
<style scoped>
.a >>> .b { /* ... */ }
</style>
上述代码会被编译成:
.a[data-v-f3f3eg9] .b { /* .... */ }
有些像Sass 之类的预处理器无法正确解析 >>> . 这种情况下你可以使用 /deep/ 操作符取而代之
module
module 写法
<style lang="scss" module>
.title{
font-size:75px;
}
</style>
编译完
._2Kxy-UP7h-qWv4Uf_GsX7-_0 {
font-size: 75px;
}
从上面编译完 对比明显可以看出 module 这方面做的更好
它不是添加属性，而是直接改变类名
Modules既不是官方标准，也不是浏览器的特性，而是在构建步骤中对CSS类名选择器限定作用域的一种方式（通过hash实现类似于命名空间的方法）。
类名是动态生成的， 唯一的， 并准确对应到源文件中的个各类的样式。
实际上，CSS Modules只是CSS模块化的一种方式。为什么我们需要CSS模块化呢？
CSS的规则都是全局的，任何一个组件的样式规则，都对整个页面有效。于是，亟待解决的就是样式冲突（污染）的问题。一般地，为了解决冲突，会把class命名写长一点，降低冲突几率；加上父元素的选择器，来限制范围等……
