Это оба способа работы с CSS в определенной области, и они делают одно и то же.Однако способ их обработки немного отличается.
Стили с областями видимости в Vue - это просто обычный CSS, но с некоторыми дополнительными классами, добавленными в область видимости.Это похоже на теневой DOM в том, что он будет охватывать весь компонент.Преимущество этого подхода заключается в том, что вы продолжаете писать CSS, как обычно, но вы получаете некоторую дополнительную область видимости, если это то, что вам нужно.
Модули CSS отличаются тем, что он использует Webpack для компиляции уникальных имен классов на основеблок и класс.Это своего рода автоматическое создание уникальных классов БЭМ.Он имеет много дополнительных функций над CSS (которые вам не нужны).
Модули CSS не являются специфической особенностью Vue, поэтому, если вы узнали, что можете применить их к любой сборке, куда вы можете импортироватьCSS Модули.Тем не менее, область видимости Vue CSS настолько проста, что нет ничего особенного, чтобы узнать, если вы знаете CSS (пара на самом деле пара селекторов).
Классы CSS-модулей будут создаваться веб-пакетом как .{component}__{className}__{randomHash}.
CSS Scoped Vue будет построен postcss как .{className}[data-v-{componentHash}].componentHash применяется к каждому элементу в этом компоненте.
Оба метода компилируют CSS на основе хешей и имен классов.CSS Scoped также добавляет дополнительные атрибуты данных в HTML для своей области видимости.Модули CSS используют javascript для управления стилями немного больше.
Хотя они оба делают одно и то же, и для меня единственное реальное отличие - это то, как создаются классы.Я думаю, что CSS-модули должны быть более производительными из-за более низкой специфики всех классов, но это действительно будет зависеть от того, кто пишет CSS.По моему личному мнению, я бы придерживался более простого (я оставлю вас, чтобы решить, какой это)