Однофайловые компоненты ​

Введение ​

Однофайловые компоненты Vue (также известные как файлы *.vue, сокращённо SFC) — это специальный формат файла, который позволяет нам инкапсулировать шаблон, логику, и стили компонента Vue в одном файле. файл. Вот пример SFC:

<script>
export default {
  data() {
    return {
      greeting: 'Привет, мир!'
    }
  }
}
</script>

<template>
  <p class="greeting">{{ greeting }}</p>
</template>

<style>
.greeting {
  color: red;
  font-weight: bold;
}
</style>

<script setup>
import { ref } from 'vue'
const greeting = ref('Привет, мир!')
</script>

<template>
  <p class="greeting">{{ greeting }}</p>
</template>

<style>
.greeting {
  color: red;
  font-weight: bold;
}
</style>

Как мы видим, Vue SFC — это естественное расширение классического трио HTML, CSS и JavaScript. Блоки <template>, <script> и <style> инкапсулируют и размещают представление, логику и стиль компонента в одном файле. Полный синтаксис определен в Спецификации синтаксиса SFC.

Почему SFC ​

Хотя SFC требуют этапа сборки, взамен есть множество преимуществ:

• Создавайте модульные компоненты, используя знакомый синтаксис HTML, CSS и JavaScript
• Совместное размещение взаимосвязанных задач
• Предварительно скомпилированные шаблоны без затрат на компиляцию во время выполнения
• CSS на уровне компонента
• Более эргономичный синтаксис при работе с Composition 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 как модуль:

import MyComponent from './MyComponent.vue'

export default {
  components: {
    MyComponent
  }
}

Теги <style> внутри SFC обычно внедряются как собственные теги <style> во время разработки для поддержки горячих обновлений. Для продакшена их можно извлечь и объединить в один CSS-файл.

Вы можете поиграть с SFC и узнать, как они компилируются, в Песочнице Vue SFC.

В реальных проектах мы обычно интегрируем компилятор SFC с инструментом сборки, таким как Vite или Vue CLI (основанный на webpack), а Vue предоставляет официальные инструменты создания шаблонов, которые помогут вам как можно быстрее приступить к работе с SFC. Более подробную информацию можно найти в разделе Инструменты SFC.

А как насчет разделения ответственности? ​

Некоторые пользователи, имеющие опыт традиционной веб-разработки, могут испытывать беспокойство по поводу того, что SFC смешивают в одном месте разные задачи, которые HTML/CSS/JS должны были разделять!

Чтобы ответить на этот вопрос, нам важно согласиться с тем, что разделение задач не равно разделению типов файлов. Конечная цель инженерных принципов — улучшить удобство сопровождения кодовых баз. Разделение задач, если оно применяется догматически как разделение типов файлов, не помогает нам достичь этой цели в контексте всё более сложных интерфейсных приложений.

В современной разработке пользовательского интерфейса мы обнаружили, что вместо разделения базы кода на три огромных слоя, которые переплетаются друг с другом, гораздо разумнее разделить их на слабосвязанные компоненты и скомпоновать их. Внутри компонента его шаблон, логика и стили по своей сути связаны, и их совместное размещение фактически делает компонент более связным и удобным в обслуживании.

Обратите внимание: даже если вам не нравится идея однофайловых компонентов, вы всё равно можете использовать их функции горячей перезагрузки и предварительной компиляции, разделив JavaScript и CSS на отдельные файлы с помощью импорта через атрибут src.