Vue的scoped原理

Vue设置样式的方法是通过单文件组件中的style标签设置，在style标签上添加一个scoped属性，就能实现样式隔离，还支持less、sass等预处理器，甚至还深度集成了CSS Modules。

scoped的原理

vue中的scoped通过在DOM结构以及css样式上加唯一不重复的标记:data-v-hash的方式，以保证唯一，达到样式私有化模块化的目的。

scoped渲染规则

• 给HTML的DOM节点加一个不重复data属性(形如：data-v-xxxxxx)来表示他的唯一性
• 在每句css选择器的末尾加一个当前组件的data属性选择器（如[data-v-xxxxxx]）来私有化样式
• 如果组件内部包含有其他组件，只会给其他组件的最外层标签加上当前组件的data属性

举例：

转译前

<style lang="scss" scoped>
.test {
    background: blue;
    span{
        color:red;
    }
}
</style>
<template>
    <div class="test">
        <span>hello world !</span>
    </div>
</template>

转译后

<style lang="css">
.test[data-v-xxxxxx] {
    background: blue;
}
.test span[data-v-xxxxxx]{
    color: red;
}
</style>
<template>
    <div class="test" data-v-xxxxxx>
        <span data-v-xxxxxx>hello world !</span>
    </div>
</template>

PostCSS会给一个组件中的所有dom添加了一个独一无二的动态属性data-v-xxxx，给CSS选择器额外添加一个对应的属性选择器来选择该组件中dom，这种做法使得样式只作用于含有该属性的dom——组件内部dom, 从而达到了样式模块化的效果。