vue中scoped原理以及scoped的穿透用法

scoped原理：

scoped：css样式只能用于当前vue组件。

scoped实现原理：通过postCss实现，给组件中所有的dom元素添加唯一的动态属性。给css选择器添加一个属性选择器。这样做是使样式只作用于该属性的dom元素。

scoped缺点：如果你子组件的根元素上有一个类已经在这个父组件中定义过了，那么这个父组件的样式就会泄露到子组件中。

scoped穿透：sass和less 使用 外层 /deep/ 第三方组件样式

stylus使用 外层 >>> 第三方组件样式

scoped穿透缺点：失去了组件的封装效果。这个组件内的所有的 .title 类的样式都会被这些样式所浸染—即便是孙节点。

使用scope和module的区别？

scoped样式可能会收到全局样式影响,

module样式不会受到全局样式影响。

scoped的效果是对元素加上data属性，但是可能会受到全局样式的影响。

module经过css-loader会对类名进行编译，添加上hash值等，所以无需担心和其他页面的同样的类名冲突，也可以避免全局样式被污染。

其实两种方案都非常简单、易用，在某种程度上解决的是同样的问题。 那么你该选择哪种呢？

scoped 样式的使用不需要额外的知识，给人舒适的感觉。它所存在的局限，也正是它的使用简单的原因。它可以用于支持小型到中型的应用。

在更大的应用或更复杂的场景中，这个时候，对于 CSS 的运用，我们就会希望它更加显式，拥有更多的控制权。虽然在模板中大量使用 $style 看起来并不那么“性感”，但却更加安全和灵活，为此我们只需付出微小的代价。

module好处：

它的第一点好处就是，当我们在 HMTL 中查看这个元素时我们可以立刻知道它所属的是哪个组件；第二点好处是，一切都变成显式的了，我们拥有了彻底的控制权——不会再有什么奇怪的现象了。

//scoped：
<style>//生成style样式
.button[data-v-f61kqi1] {color: red;}
</style><button class=”button” data-v-f61kqi1></button>

//module：
<template><button :class="$style.button" />
</template><style module>.button {color: red}
</style>
//生成html和style样式
<style>.ComponentName__button__2Kxy {color: red;}
</style><button class=”ComponentName__button__2Kxy”></button>