vue中scoped私有化style的实现原理

    在vue中，scoped设计的初衷就是让样式变得私有，让它不会影响其他任何地方的样式。

    我们先从实现模块组件的原理说起。通过查看DOM结构发现：vue通过在DOM结构以及css样式上加唯一不重复的标记，以保证唯一，达到样式私有化模块化的目的。具体的渲染结果是怎样的，通过例子来说明。这里为了方便称呼，我们假设把“加了scoped的组件”叫做“样式私有组件”；把“未加scoped的”叫做“一般组件”。

    （1）一个公共组件v-button，为了样式模块化，给其加上scoped属性。

    // v-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>

    v-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的这一操作然达到了组件样式模块化的目的，造成一种结果是其中每个样式的权重加重了，因此，理论上我们要去修改这个样式，需要更高的权重去覆盖这个样式。这是增加复杂度的一个维度。

    （2）“一般组件”引用“样式私有组件”v-button呢？

    //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>

    此时，content.vue的style上没有加scoped属性，那么渲染出来html和css分别就是：

    <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>
    /* button.vue渲染出来的css */
    .button-warp[data-v-2311c06a] {
        display:inline-block;
    }
    .button[data-v-2311c06a] {
        padding: 5px 10px;
        font-size: 12px;
        border-radus: 2px;
    }
    /* content.vue渲染出来的css */
    .content {
        width: 1200px;
        margin: 0 auto;
    }
    .content .button {
        border-raduis: 5px;
    }

    可以看出，虽然在content组件中，修改了button的border-raduis属性，但是由于权重关系，生效的依然是组件内部的样式（此时是外部的样式被覆盖）。所以如果要达到修改样式的目的，就必须加重我们要修改样式的权重（增加选择器层级、ID选择器、并列选择器、impotant等）。

    （3）“样式私有组件”引用“样式私有组件”v-button呢？

    如果在content.vue的style上加了scoped属性呢？按照开始分析出来的规则（事实也是这样的），首先是在所有的DOM节点加上data属性，然后在css选择器尾部加上data属性选择器。那么渲染出来html和css分别就是：

    <div data-v-57bc25a0 class="content">
        <p data-v-57bc25a0 class="title"></p>
        <!-- v-button假设是上面定义的组件 -->
        <div data-v-57bc25a0 data-v-2311c06a class="button-warp">
            <button data-v-2311c06a class="button">text</button>
        </div>
    </div>
    /* button.vue渲染出来的css */
    .button-warp[data-v-2311c06a] {
        display:inline-block;
    }
    .button[data-v-2311c06a] {
        padding: 5px 10px;
        font-size: 12px;
        border-radus: 2px;
    }
    /* content.vue渲染出来的css */
    .content[data-v-57bc25a0] {
        width: 1200px;
        margin: 0 auto;
    }
    .content .button[data-v-57bc25a0] {
        border-raduis: 5px;
    }

    对于上面的（2）和（3）这两种情况，可以明显看出来渲染后的结果大不相同。
    在第（3）情况中，虽然我们在content添加了想要修改button组件的样式的代码，但是仔细看，由于 ".content .button" 这句在末尾加的是content组件的scoped标记，最后这句其实根本作用不到我们想要的DOM节点上，所以第（3）情况我们在content内部写的任何样式都依然不会影响到button.vue组件。
    总结scoped的渲染规则有三条：
    给HTML的DOM节点加一个不重复data属性(形如：data-v-2311c06a)来表示他的唯一性；
    在每句css选择器的末尾（编译后的生成的css语句）加一个当前组件的data属性选择器（如[data-v-2311c06a]）来私有化样式；
    如果组件内部包含有其他组件，只会给其他组件的最外层标签加上当前组件的data属性。

参考文章：vue中慎用style的scoped属性 。