Vue中style标签的scoped的作用及原理
# 作用
组件之间的样式不互相污染
# 原理
- 没有设置scoped的style代码
<div class="login">登录</div>
<style>
.login {
width: 100px;
height: 100px
}
</style>
1
2
3
4
5
6
7
2
3
4
5
6
7
最后编译后的样式代码没有什么变化
- 设置了scoped的style代码
<div class="login">登录</div>
<style scoped>
.login {
width: 100px;
height: 100px
}
</style>
1
2
3
4
5
6
7
2
3
4
5
6
7
最终编译后的样式代码变成了这样：
<div data-v-257dda99b class="login">登录</div>
<style scoped>
.login[data-v-257dda99b] {
width: 100px;
height: 100px
}
</style>
1
2
3
4
5
6
7
2
3
4
5
6
7
我们通过上面的例子，不难发现多了一个data-v-hash属性，也就是说加了scoped，PostCSS给一个组件中的所有dom添加了一个独一无二的动态属性，然后，给CSS选择器额外添加一个对应的属性选择器来选择该组件中dom，这种做法使得样式只作用于含有该属性的dom——组件内部dom，可以使得组件之间的样式不互相污染。