Введение в script setup
Как компилируется в setup(), автоматические импорты, привязки верхнего уровня, доступные в шаблоне
«Введение в script setup» — бесплатный урок Vue Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 4 уроков всего.
Более простой API композиции
<script setup> — это синтаксический сахар API композиции, обрабатываемый на этапе компиляции. Он убирает шаблонный код, поэтому Ваши однофайловые компоненты выглядят как обычный JavaScript с реактивными переменными.
От функции настройки к настройке скрипта
Классический вариант требует export default, функции setup() и явного return. Сравните его с вариантом <script setup>.
<!-- classic -->
<script>
import { ref } from 'vue'
export default {
setup() {
const count = ref(0)
return { count }
}
}
</script>Версия настройки скрипта
В варианте <script setup> нет объекта-обёртки и оператора возврата. Переменные верхнего уровня автоматически доступны в шаблоне.
<!-- script setup -->
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>Явный возврат не нужен
Компилятор считает каждую привязку верхнего уровня — переменные, функции и импорты — доступной в шаблоне. Вы пишете меньше кода и не рискуете забыть что-то вернуть.
Функции верхнего уровня также доступны
Определите функцию на верхнем уровне и напрямую свяжите её с шаблоном. Возвращать её не нужно.
<script setup>
import { ref } from 'vue'
const count = ref(0)
function increment() { count.value++ }
</script>
<template>
<button @click="increment">{{ count }}</button>
</template>Импортированные компоненты регистрируются автоматически
В классическом API компоненты нужно было перечислять в параметре components. В варианте <script setup> достаточно импортировать компонент, чтобы использовать его в шаблоне.
<script setup>
import BaseButton from './BaseButton.vue'
</script>
<template>
<BaseButton />
</template>Всё равно компилируется в функцию настройки
Внутри компилятор преобразует <script setup> в обычную функцию setup(). Вы получаете то же поведение и производительность, но разработка становится проще.
Добавление TypeScript с указанием языка
Включите TypeScript, добавив к тегу lang="ts". После этого Вы сможете указывать типы переменных, использовать обобщённые типы с макросами компилятора и получать полноценный вывод типов.
<script setup lang="ts">
import { ref } from 'vue'
const count = ref<number>(0)
</script>Макросы компилятора
Внутри <script setup> доступны специальные макросы компилятора, такие как defineProps, defineEmits и defineExpose. Их не нужно импортировать — компилятор распознаёт их сам. В следующих уроках Вы разберёте каждый из них.
Сочетание с обычным блоком скрипта
Иногда нужны параметры, которые выполняются один раз на уровне модуля, например пользовательское имя компонента. Рядом с <script setup> можно добавить обычный блок <script>.
<script>
export default { name: 'MyComponent' }
</script>
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>Почему команды предпочитают настройку скрипта
- Меньше шаблонного кода — нет объекта-обёртки и возврата.
- Автоматическая регистрация компонентов.
- Более высокая производительность во время выполнения благодаря анализу на этапе компиляции.
- Отличная поддержка TypeScript.
Это рекомендуемый стиль для однофайловых компонентов Vue 3.
Быстрая проверка
Проверьте, насколько хорошо Вы поняли настройку скрипта.
Итоги
Вы узнали основные сведения о <script setup>:
- Это синтаксический сахар над
setup(), обрабатываемый на этапе компиляции. - Явный возврат не нужен — привязки верхнего уровня автоматически становятся доступными.
- Импортированные компоненты регистрируются автоматически.
- Добавьте
lang="ts", чтобы использовать TypeScript. - Макросы компилятора, например
defineProps, доступны без импорта.
Часто задаваемые вопросы
Урок «Введение в script setup» бесплатный?
Да — полный текст урока «Введение в script setup» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 4 уроков всего.
Чему я научусь в уроке «Введение в script setup»?
Как компилируется в setup(), автоматические импорты, привязки верхнего уровня, доступные в шаблоне Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Vue Academy?
Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «Введение в script setup»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Vue Academy?
Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Введение в script setup
- defineProps и defineEmits
- defineExpose и useAttrs
- Импорт и использование компонуемых функций в script setup