scoped
2017-11-27 发布
vue中慎用style的scoped属性
42.8k 次阅读 · 读完需要 19 分钟
45
本文发布在我的博客vue中慎用style的scoped属性
许可协议: 署名-非商业性使用-禁止演绎4.0国际 转载请保留原文链接及作者。
在vue组件中，在style标签上添加scoped属性，以表示它的样式作用于当下的模块，很好的实现了样式私有化的目的，这是一个非常好的机制。但是为什么要慎用呢？在实际业务中我们往往会对公共组件样式做细微的调整，如果添加了scoped属性，那么样式将会变得不易修改。初写这篇文章时，本人没有找到一个好的方法去解决这个问题，后来经过大伙的解答，才让我恍然大悟。
何为谨慎使用
谨慎使用不是不用，而是持一种审视的目光去看待它。scoped肯定是解决了样式私有化的问题，但同时也引入了新的问题---样式不易（可）修改，而很多时候，我们是需要对公共组件的样式做微调的。所以我才说要谨慎使用
解决方案
首先要说明的问题是，最开始我以为这是一个BUG或者说一个弊端(因为当时没有搞明白scoped的真正作用)，就很英勇的去提了一个issue，然后理所当然的被关闭了，关闭的理由是：scoped设计的初衷就是让样式变得不可修改。但是由于我在业务中经常遇到需要修改有scoped属性的组件，我就写了一篇文章记录一下这个问题，希望大家谨慎的使用这个属性。
然而事实再一次证明了我的愚蠢，在vue-loader的文档中已经详细的对这个问题做了分析，并且对我遇到这种问题给出了解决方法：vue-loader的深度作用选择器。
因为我并没有去深入了解这些问题，所以注定这篇文章被大伙拍砖，??????
鉴于此，虽然这篇文章没有什么价值，但为了提醒我自己深究的意义，我对后面的内容做了保留，以下内容是最开始文章的原文，请大家忽略，上面的内容才是正文，没错，正文就是这么少。
--------------------------------正文分割线，以下是无营养的内容--------------------------------
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>