1、作用 

在 Vue 中使用 scoped 属性可以让样式作用域仅限于当前组件中，不影响全局，避免了样式污染和样式冲突的问题。

在组件中使用 scoped 的方式如下：

<template><div class="example">Example Component</div>
</template><style scoped>
.example {color: red;
}
</style>

在这个例子中，.example 样式规则只会作用于当前组件内部的元素，而不会影响全局的样式。

 

2、原理：

为了达到组件样式模块化，做了两个处理：

① scoped 会为每个组件的 DOM 节点添加一个唯一的 data 属性(例如: data-v-5558831a)作为标记；

② css样式上是通过 data 属性选择器（[data-v-2311c06a]）的方式来私有化样式。

3、编译前后

Vue中的 scoped 属性的效果主要是通过PostCss实现的。

以下是转译前的代码：

<template><div class="example">test</div>
</template><style scoped lang="sass">.example {color:red;}
</style>

转译后：

.example[data-v-1121845a] {color: red;
}
<template><div class="example" data-v-1121845a>test</div>
</template>

即：PostCSS 给一个组件中的所有 DOM 添加了一个独一无二的动态属性，给 css 选择器额外添加一个对应的属性选择器，来选择组件中的 DOM，这种做法使得样式只作用于含有该属性的 DOM 元素(组件内部的 DOM)。