Vue 中的模块样式和作用域样式有什么区别？
What is the difference between module and scoped styles in Vue?
Vue中的<style module>和<style scoped>有什么区别？
官方文档（link1, link2) states only that scoped uses PostCSS transformation and module uses CSS Modules。但两者真正的功能区别是什么？
（注意：如果他们使用的PostCSS转换是that plugin，它实际上使用了CSS个模块...）
它们都是处理作用域 CSS 的两种方式，并且做的事情几乎相同。不过他们处理的方式有点不同。
Vue 中的作用域样式只是正常的 CSS 但有一些额外的 classes 添加了作用域。它与影子 DOM 相似，因为它将范围限定到一个组件。这种方法的好处是您可以像往常一样继续编写 CSS，但如果这是您想要的，您可以获得一些额外的范围。
CSS 模块的不同之处在于它使用 Webpack 根据块和 class 编译唯一的 class 名称。它是一种自动创建独特的 BEM classes。它在 CSS 之上还有很多附加功能（您不必使用）。
CSS 模块不是 Vue 特有的东西，所以如果你知道你可以将它应用到任何可以导入 CSS 模块的构建。然而，Vue CSS 作用域非常简单，如果您知道 CSS（几个选择器就足够了），那么实际上没有任何额外的东西需要学习。
CSS 模块 classes 将由 webpack 构建为 .{component}__{className}__{randomHash}.
Scoped Vue CSS 将由 postcss 构建为 .{className}[data-v-{componentHash}]。 componentHash 应用于该组件中的每个元素。
这两种方法都是根据哈希和 class 名称编译 CSS。 Scoped CSS 还向 HTML 添加了额外的数据属性以用于范围界定。 CSS 模块更多地使用 javascript 来管理样式。
虽然它们都在做几乎相同的事情，但对我而言，唯一真正的区别是 classes 的创建方式。我想 CSS 模块应该更高效，因为所有 classes 的特异性较低，但这实际上取决于编写 CSS 的人。以我个人的观点，我会坚持使用更简单的一种（我会让你决定是哪一种）
Vue中的<style module>和<style scoped>有什么区别？
官方文档（link1, link2) states only that scoped uses PostCSS transformation and module uses CSS Modules。但两者真正的功能区别是什么？
（注意：如果他们使用的PostCSS转换是that plugin，它实际上使用了CSS个模块...）
它们都是处理作用域 CSS 的两种方式，并且做的事情几乎相同。不过他们处理的方式有点不同。
Vue 中的作用域样式只是正常的 CSS 但有一些额外的 classes 添加了作用域。它与影子 DOM 相似，因为它将范围限定到一个组件。这种方法的好处是您可以像往常一样继续编写 CSS，但如果这是您想要的，您可以获得一些额外的范围。
CSS 模块的不同之处在于它使用 Webpack 根据块和 class 编译唯一的 class 名称。它是一种自动创建独特的 BEM classes。它在 CSS 之上还有很多附加功能（您不必使用）。
CSS 模块不是 Vue 特有的东西，所以如果你知道你可以将它应用到任何可以导入 CSS 模块的构建。然而，Vue CSS 作用域非常简单，如果您知道 CSS（几个选择器就足够了），那么实际上没有任何额外的东西需要学习。
CSS 模块 classes 将由 webpack 构建为 .{component}__{className}__{randomHash}.
Scoped Vue CSS 将由 postcss 构建为 .{className}[data-v-{componentHash}]。 componentHash 应用于该组件中的每个元素。
这两种方法都是根据哈希和 class 名称编译 CSS。 Scoped CSS 还向 HTML 添加了额外的数据属性以用于范围界定。 CSS 模块更多地使用 javascript 来管理样式。
虽然它们都在做几乎相同的事情，但对我而言，唯一真正的区别是 classes 的创建方式。我想 CSS 模块应该更高效，因为所有 classes 的特异性较低，但这实际上取决于编写 CSS 的人。以我个人的观点，我会坚持使用更简单的一种（我会让你决定是哪一种）