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>