浅谈 Vue 中慎用 style 的 scoped 属性
本篇文章主要介绍了 Vue 中慎用 style 的 scoped 属性的重要性。scoped 属性是在 Vue 组件中使用 style 标签时添加的特殊属性，用于使样式私有化（模块化），避免全局样式污染。但是，为什么要慎用 scoped 属性呢？因为在修改公共组件的样式时，scoped 属性可能会增加复杂度。
让我们了解 scoped 属性的实现原理。scoped 属性的实现原理是通过在 DOM 结构和 CSS 样式上添加唯一不重复的标记，以保证唯一，达到样式私有化模块化的目的。例如，在 button.vue 组件中添加 scoped 属性：
```html
<template>
<div class="button-warp">
<button class="button">text</button>
</div>
</template>
<style scoped>
.button-warp {
display: inline-block;
}
.button {
padding: 5px 10px;
font-size: 12px;
border-radius: 2px;
}
</style>
```
浏览器渲染后的 HTML 和 CSS 部分分别为：
```html
<div data-v-2311c06a class="button-warp">
<button data-v-2311c06a class="button">text</button>
</div>
.button-warp[data-v-2311c06a] {
display: inline-block;
}
.button[data-v-2311c06a] {
padding: 5px 10px;
font-size: 12px;
border-radius: 2px;
}
```
可以看出，添加了 scoped 属性的组件，为了达到组件样式模块化，做了两个处理：1. 给 HTML 的 DOM 节点加一个不重复的 data 属性（形如：data-v-2311c06a）来表示他的唯一性；2. 在每句 CSS 选择器的末尾（编译后的生成的 CSS 语句）加一个当前组件的 data 属性选择器（如[data-v-2311c06a]）来私有化样式。
但是，这种做法也会导致一个问题：每个样式的权重加重了。理论上，我们要去修改这个样式，需要更高的权重去覆盖这个样式。这是增加复杂度的其中一个维度。
接下来，让我们了解组件互相调用的情况。在组件 content.vue 中使用了 button 组件，那么 content.vue 组件是否添加 scoped 属性渲染出来的结果有什么区别呢？
```html
// content.vue
<template>
<div class="content">
<p class="title"></p>
<!-- v-button 假设是上面定义的组件 -->
<v-button></v-button>
</div>
</template>
<style>
.content {
width: 1200px;
margin: 0 auto;
}
.content .button {
border-radius: 5px;
}
</style>
```
如果 style 上没有加 scoped 属性，那么渲染出来的 HTML 和 CSS 分别就是：
```html
<div class="content">
<p class="title"></p>
<!-- v-button 假设是上面定义的组件 -->
<div data-v-2311c06a class="button-warp">
<button data-v-2311c06a class="button">text</button>
</div>
</div>
.content {
width: 1200px;
margin: 0 auto;
}
.content .button {
border-radius: 5px;
}
```
可以看出，scoped 属性在组件之间的调用中扮演着非常重要的角色。因此，在使用 scoped 属性时，需要小心谨慎，以避免增加复杂度。
scoped 属性是 Vue 组件中非常重要的一部分，但是在使用时需要小心谨慎，以避免增加复杂度。
