0Pricing
Frontend Academy · Урок

Функция setup() и script setup

Пишите логику в функции setup() или используйте сокращённую запись , предоставляйте значения шаблону и разбирайтесь в хуках жизненного цикла Composition API.

«Функция setup() и script setup» — бесплатный урок Frontend Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.

Функция setup()

В Composition API Vue 3 setup() — это опция компонента, заменяющая data, methods, computed и watch. Она получает props и контекст setup в качестве аргументов и возвращает всё необходимое шаблону.

export default {
  props: { userId: String },
  setup(props, { emit, attrs, slots }) {
    const user = ref(null);
    onMounted(async () => {
      user.value = await fetchUser(props.userId);
    });
    return { user }; // must return what template uses
  }
};

<script setup> — синтаксический сахар

<script setup> — это синтаксический сахар на этапе компиляции для setup(). Всё, что объявлено на верхнем уровне, автоматически доступно в шаблоне. Оператор return не нужен.

<script setup lang="ts">
import { ref, onMounted } from 'vue';

const count = ref(0);
// count is automatically available in template
</script>

Хуки жизненного цикла в setup()

Хуки жизненного цикла Vue 3 — это импортируемые функции: onMounted, onUpdated, onUnmounted, onBeforeMount, onBeforeUpdate и т. д. Их можно вызывать несколько раз, регистрируя несколько обработчиков.

<script setup>
import { onMounted, onUnmounted } from 'vue';

let timer: ReturnType<typeof setInterval>;

onMounted(() => {
  timer = setInterval(tick, 1000);
  console.log('Component mounted');
});

onUnmounted(() => {
  clearInterval(timer); // cleanup
});
</script>

Props в setup()

В setup() props являются реактивными. Не извлекайте их напрямую — используйте toRefs(props) или обращайтесь к ним через props.x, чтобы сохранить реактивность.

const props = defineProps<{ userId: string }>();

// Reactive access:
watch(() => props.userId, (id) => fetchUser(id));

// toRefs for destructuring:
const { userId } = toRefs(props);

defineExpose() — предоставление доступа родителю

По умолчанию компоненты с