它们都是处理作用域CSS的方法，做的事情几乎是一样的。
Vue中的Scoped styles只是普通的CSS，但是添加了一些额外的类来定义作用域。它类似于shadow DOM，因为它会将事情的范围扩展到一个组件。这种方法的好处是你可以像往常一样编写CSS，但是如果你想要的话，你可以得到一些额外的作用域。
CSS Modules的不同之处在于它使用Webpack来编译基于块和类的唯一类名。它可以自动创建唯一的BEM类。它在CSS之上有很多额外的功能（你不必使用）。
CSS Modules不是Vue特有的东西，所以如果你学会了，你可以把它应用到任何可以导入CSS Modules的构建中。然而Vue CSS作用域是如此简单，如果你知道CSS，就没有什么额外的东西需要学习了（几个选择器就足够了）。
CSS模块类将由webpack构建为.{component}__{className}__{randomHash}。
作用域Vue CSS将由postcss构建为.{className}[data-v-{componentHash}]。componentHash应用于该组件中的每个元素。
这两种方法都是基于散列和类名编译CSS。作用域CSS还为HTML添加了额外的数据属性。CSS Modules更多地使用JavaScript来管理样式。
它们都在做几乎相同的事情，但对我来说，唯一的真实的区别是如何创建类。我想CSS模块应该更高性能，因为所有类的特异性较低，但这真的取决于编写CSS的人。在我个人看来，我会坚持使用更简单的一个（我会让你决定哪一个是）

Module是一个比Scoped更安全的CSS作用域选项
**Scoped.**在这种模式下，你的CSS类会被附加一个data-v属性，就像下面的.button[data-v-9ad5ab0c] .（data-v属性被Vue添加到你的html元素中）。

因此，应用的样式的特殊性更高，但同时，如果代码中的其他地方有.button类的样式，它们也会被应用（假设它们没有被应用于.button[data-v-9ad5ab0c]的样式覆盖）。

Module。在此模式下，您的.button类将被修改为类似._button_vdpj6_2的哈希值。

这样你就得到了一个唯一的元素类，这个类不会影响到任何其他类为.button的元素，而且.button的样式也不会影响到你正在样式化的元素。