Что такое однофайловые компоненты (SFC)?
SFC позволяют разработчикам создавать модульные и структурированные компоненты, которые легко интегрируются в большие проекты.
Однофайловые компоненты (SFC) — это способ организации кода в Vue.js, при котором все компоненты HTML, CSS и JavaScript объединяются в один файл с расширением .vue.
Такой подход дает ряд преимуществ:
- Разработка модульных компонентов с использованием известного синтаксиса HTML, CSS и JavaScript
- Интеграция неразрывно связанных тем
- Предварительно скомпилированные шаблоны без необходимости компиляции во время выполнения.
- Функциональность для CSS с помощью скопированных областей
- Более эргономичный синтаксис при использовании Composition API
- Дополнительная оптимизация во время компиляции благодаря перекрестному анализу шаблонов и скриптов
- Поддержка IDE с автозаполнением и проверкой типов выражений шаблонов
- Готовая к использованию поддержка горячей замены модулей (HMR)
Vue SFC - это специфический для фреймворка формат файлов, и он должен быть предварительно скомпилирован в стандартные JavaScript и CSS с помощью @vue/compiler-sfc. Поскольку скомпилированный SFC является стандартным модулем JavaScript (ES), SFC может быть импортирован как модуль, если компиляция настроена правильно. Стоит обратить внимание на то, что css-стили, добавленные с помощью тега style в файле SFC обычно встраиваются как теги нативного стиля только в режиме разработки для поддержки быстрой модификации (HMR). В производственной среде они могут быть извлечены и объединены в один CSS-файл.
