浅谈vue中慎用style的scoped属性

在vue组件中，为了使样式私有化（模块化），不对全局造成污染，可以在style标签上添加scoped属性以表示它的只属于当下的模块，这是一个非常好的举措，但是为什么要慎用呢？因为在我们需要修改公共组件（三方库或者项目定制的组件）的样式的时候，scoped往往会造成更多的困难，需要增加额外的复杂度。

scoped实现私有化样式的原理

为什么会说，会增加复杂度？那么我们先从的实现模块的原理说起。为了方便称呼，我们假设把这种组件叫做模块私有组件，其他的未加scoped的叫做模块一般组件。

通过查看DOM结构发现：vue通过在DOM结构以及css样式上加唯一不重复的标记，以保证唯一，达到样式私有化模块化的目的。具体的渲染结果是怎样的，通过一个例子来说明。

公共组件button组件

一个公共组件button，为了样式模块化，给其加上scoped属性，

//button.vue<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-radus: 2px;  }</style>

浏览器渲染button组件

button组件在浏览器渲染出的html部分和css部分分别为：

<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-radus: 2px;}

从上面的字可以看出，添加了scoped属性的组件，为了达到组件样式模块化，做了两个处理：

给HTML的DOM节点加一个不重复data属性(形如：data-v-2311c06a)来表示他的唯一性 在每句css选择器的末尾（编译后的生成的css语句）加一个当前组件的data属性选择器（如[data-v-2311c06a]）来私有化样式

大家都知道css样式有一个优先级的说法，scoped的这一操作，虽然达到了组件样式模块化的目的，但是会造成一种后果：每个样式的权重加重了：理论上我们要去修改这个样式，需要更高的权重去覆盖这个样式。这是增加复杂度的其中一个维度。

其他组件引用button组件

上面分析了单个组件渲染后的结果,那么组件互相调用之后会出现什么样的结果呢？，具体分两种情况：模块一般组件引用模块私有组件（本质和模块私有组件引用模块一般组件一样）；模块私有组件引用模块私有组件。

举个例子：在组件content.vue中使用了button组件，那么content.vue组件是否添加scoped属性渲染出来的结果有什么区别呢？

//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-raduis: 5px;  }</style>