Введение

Однофайловые компоненты Vue (также называемые *.vue файлами, сокращенно SFC) — это специальный формат файла, который позволяет нам инкапсулировать шаблон, логику и стиль компонента Vue в одном файле. Вот пример SFC
Как мы видим, Vue SFC — это естественное расширение классического трио HTML, CSS и JavaScript. Блоки template, script и style инкапсулируют и размещают представление, логику и стиль компонента в одном файле.

Спецификация синтаксиса SFC

Однофайловый компонент Vue (SFC), обычно использующий *.vue расширение файла, представляет собой собственный формат файла, который использует синтаксис, подобный HTML, для описания компонента Vue. Vue SFC синтаксически совместим с HTML
Каждый *.vue файл состоит из трех типов языковых блоков верхнего уровня: template, script и style, а также дополнительных пользовательских блоков:

# Языковые блоки

template
  • Каждый *.vue файл может содержать не более одного блока верхнего уровня template
  • Содержимое будет извлечено и передано в @vue/compiler-dom, предварительно скомпилировано в функции рендеринга JavaScript и прикреплено к экспортированному компоненту по своему render усмотрению.
script
  • Каждый *.vue файл может содержать не более одного script блока (исключая script setup)
  • Скрипт выполняется как модуль ES
  • Экспорт по умолчанию должен представлять собой объект параметров компонента Vue либо в виде простого объекта, либо в виде возвращаемого значения defineComponent
script setup
  • Каждый *.vue файл может содержать не более одного script setupблока (исключая обычный script)
  • Скрипт предварительно обрабатывается и используется как setup() функция компонента, то есть он будет выполняться для каждого экземпляра компонента. Привязки верхнего уровня script setupавтоматически предоставляются шаблону. Более подробную информацию см. в специальной документации по script setup
style
  • Один *.vue файл может содержать несколько style тегов
  • Тег style может иметь атрибуты scopedили module атрибуты, помогающие инкапсулировать стили в текущий компонент. style. В одном компоненте можно использовать несколько тегов с разными режимами инкапсуляции

# Пользовательские блоки

Дополнительные пользовательские блоки могут быть включены в *.vue файл для любых потребностей конкретного проекта, например блок docs
Некоторые реальные примеры пользовательских блоков включают в себя
  • page-query
  • gql
  • i18n
Обработка блоков блоков будет защищена от инструментов — если вы хотите создать свою собственную интеграцию блоков блоков, см. раздел «Инструменты для внешних блоков SFC» для получения более подробной информации.

# Автоматический вывод имени

SFC автоматически выводит имя компонента из имени его файла в следующих случаях
  • Форматирование предупреждений разработчиков
  • Проверка инструментов разработчика
  • Рекурсивная ссылка на себя, например, файл с именем FooBar.vue может ссылаться на себя, как FooBar в его шаблоне. Это имеет более низкий приоритет, чем явно зарегистрированные/импортированные компоненты

# Препроцессоры

Блоки могут объявлять языки препроцессора с помощью lang атрибутов. Самый распространенный случай — использование TypeScript для script блока
lang можно применить к любому блоку — например, мы можем использовать style Sass и Pug: template
Обратите внимание
Интеграция с различными препроцессорами может различаться в зависимости от цепочки инструментов

# src Импорт

Если вы предпочитаете разбивать *.vue компоненты на несколько файлов, вы можете использовать src атрибут для импорта внешнего файла для языкового блока
Помните, что src импорт следует тем же правилам разрешения, что и команда модуля веб-пакета, что означает
  • Относительные пути должны начаться с ./
  • Вы можете импортировать ресурсы из зависимостей npm
src импорт также с работающими пользовательскими блоками, например

# Комментарии

Внутри каждого блока вы должны использовать синтаксис комментариев используемого языка (HTML, CSS, JavaScript, Pug и т. д.). Для комментариев верхних уровней воспользуйтесь синтаксисом комментариев HTML

Почему SFC

Хотя SFC требуют этапа сборки, взамен есть множество преимуществ
  • Создавайте модульные компоненты, используя знакомый синтаксис HTML, CSS и JavaScript
  • Совместное размещение взаимосвязанных задач
  • Предварительно скомпилированные шаблоны без затрат на компиляцию во время выполнения
  • CSS на уровне компонента
  • Более эргономичный синтаксис при работе с API композиции
  • Больше оптимизации времени компиляции за счет перекрестного анализа шаблона и скрипта
  • Поддержка IDE с автозаполнением и проверкой типов выражений шаблона
  • Готовая поддержка горячей замены модулей (HMR)
SFC — это определяющая особенность Vue как платформы и рекомендуемый подход для использования Vue в следующих сценариях
  • Одностраничные приложения (SPA)
  • Генерация статического сайта (SSG)
  • Любой нетривиальный интерфейс, этап сборки которого может быть оправдан для улучшения опыта разработки (DX)
Тем не менее, мы понимаем, что существуют сценарии, в которых SFC могут показаться излишними. Вот почему Vue по-прежнему можно использовать с помощью простого JavaScript без этапа сборки. Если вы просто ищете улучшение статического HTML с помощью легких взаимодействий, вы также можете попробовать petite-vue, подмножество Vue размером 6 КБ, оптимизированное для постепенного улучшения.

Как это работает

Vue SFC — это формат файла, специфичный для платформы, и он должен быть предварительно скомпилирован с помощью @vue/compiler-sfc в стандартный JavaScript и CSS. Скомпилированный SFC представляет собой стандартный модуль JavaScript (ES). Это означает, что при правильной настройке сборки вы можете импортировать SFC как модуль
styleТеги внутри SFC обычно вводятся как собственные