Single File Component и <script setup>

Команда переходит с jQuery на Vue и сталкивается с привычным спором: разметка, стили и логика кнопки лежат в трёх разных файлах, и при правке приходится прыгать между ними. В мире Vue ответ это Single File Component. Один файл Button.vue содержит шаблон, его JavaScript и его CSS вместе, причём стили автоматически не утекают на соседние компоненты. К Vue 3.5 в 2026 году синтаксис script setup стал настолько лаконичным, что описание компонента занимает на треть меньше строк, чем в старом Options API.

• Любой компонент в проекте на Vue это файл .vue, формат поддерживается редакторами VS Code (расширение Vue) и WebStorm из коробки
• Scoped-стили решают вечную боль CSS: класс .title в одном компоненте не ломает .title в другом
• Дизайн-системы вроде PrimeVue и Vuetify раздают сотни готовых .vue компонентов, которые импортируются по одному
• script setup убрал шаблонный код Options API, и к 2026 это синтаксис по умолчанию во всех гайдах Vue
• Компилятор Vue разбирает .vue файл на этапе сборки Vite, в браузер уходит обычный JavaScript и CSS

Предварительные знания

• Созданный проект на Vue из урока vue-02 и понимание роли Vite
• JavaScript: импорты, функции, объекты, стрелочные функции
• CSS на уровне селекторов и классов
• Базовое знание HTML-разметки

Анатомия файла .vue

Single File Component это файл с расширением .vue, который содержит до трёх блоков верхнего уровня. Блок template описывает разметку компонента. Блок script содержит его логику на JavaScript или TypeScript. Блок style задаёт CSS. Всё, что относится к одному компоненту, лежит в одном месте, и при правке не нужно прыгать между тремя файлами.

Компилятор Vue разбирает этот файл на этапе сборки Vite. Шаблон превращается в рендер-функцию, скрипт остаётся JavaScript, стили извлекаются в отдельный CSS. В браузер уходит обычный код, никакой .vue файл рантайм не парсит. Поэтому формат SFC это инструмент удобства разработки: группировка по компоненту вместо группировки по технологии.

Группировка по компоненту против группировки по технологии это та же идея, что отстаивал React с JSX. Vue приходит к ней с другой стороны: шаблон остаётся почти обычным HTML, а не превращается в JavaScript-выражения. Разный путь, общая цель - держать связанный код рядом.

Почему <script setup> стал стандартом

До Vue 3 компонент описывали через Options API: объект с полями data, methods, computed. Composition API из Vue 3 позволил собирать логику функциями, но требовал явно возвращать всё, что нужно шаблону, из функции setup. Атрибут setup на теге script убрал этот ритуал. В script setup любая переменная и функция верхнего уровня автоматически доступна в шаблоне.

script setup это не отдельный API, а компиляторный сахар над тем же Composition API. Компилятор сам оборачивает код в функцию setup и собирает return. Поэтому ref, computed и watch работают там точно так же, как в обычном setup.

Scoped-стили и импорт компонентов

Атрибут scoped на блоке style изолирует стили компонента. Без него класс .title из одного компонента переопределил бы .title из другого - вечная боль глобального CSS. Со scoped Vue на этапе компиляции добавляет каждому элементу компонента уникальный data-атрибут и дописывает его в селекторы, поэтому стили действуют только внутри своего компонента.

Подключение одного компонента в другой это обычный импорт. В script setup достаточно написать import TodoItem from './TodoItem.vue', и компонент сразу доступен в шаблоне как тег. Отдельная регистрация, которая требовалась в Options API, здесь не нужна: компилятор сам связывает импортированное имя с тегом в шаблоне. Имена компонентов по конвенции пишут в PascalCase.

Scoped не делает стили абсолютно непробиваемыми. Глобальные стили из обычного style без scoped по-прежнему влияют на компонент, а для намеренного воздействия на дочерний компонент есть селектор deep. Scoped решает случайные коллизии, а не строит полную изоляцию вроде Shadow DOM.

Связь с другими темами

Этот урок про формат компонента. Дальше наполняем его содержимым:

• Синтаксис шаблонов — Что писать внутри блока template: интерполяция, директивы, обработчики событий
• Основы реактивности — Состояние, объявленное в блоке script, делает шаблон живым и реактивным
• Макросы script setup — defineProps и defineEmits позволяют компонентам принимать данные и общаться друг с другом

Итог

• Single File Component это файл .vue с тремя блоками: template (разметка), script (логика), style (стили). Компилятор Vue разбирает его на этапе сборки
• script setup это синтаксический сахар над Composition API и способ по умолчанию: любая переменная или функция верхнего уровня автоматически доступна в шаблоне без явного return
• Атрибут scoped на блоке style изолирует CSS компонента: Vue добавляет уникальный data-атрибут, и стили не утекают на соседей
• Дочерний компонент подключается обычным импортом в script setup и используется в шаблоне как тег, без отдельной регистрации
• В браузер уходит не .vue файл, а скомпилированный JavaScript и CSS, поэтому формат это удобство разработки, а не рантайм-нагрузка

Связанные уроки

• vue-04-template-syntax — Блок template внутри SFC использует директивы и интерполяцию, которые разбираются в следующем уроке
• vue-09-script-setup — defineProps, defineEmits и defineModel это макросы, которые живут именно внутри script setup. Прямое продолжение темы
• vue-05-reactivity-fundamentals — Реактивное состояние объявляется в блоке script компонента, поэтому понимание SFC предшествует реактивности