Функция setup и её возможности

Функция setup является центральным элементом Composition API во Vue.js. Она предоставляет возможность создавать компоненты более декларативно и управлять реактивностью на уровне функций, а не объектов. В отличие от Options API, где данные, методы и вычисляемые свойства разделяются по различным ключам, setup объединяет логику компонента в одном месте.

Синтаксис функции setup

Функция setup вызывается один раз при создании компонента, до его монтирования. Она принимает два аргумента:

setup(props, context) {
  // Логика компонента
}

  • props — объект, содержащий все свойства, переданные компоненту.

  • context — объект, включающий:

    • attrs — атрибуты, не объявленные как props.
    • slots — слоты компонента.
    • emit — функцию для вызова событий родительского компонента.

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

Работа с реактивными данными

Vue.js предоставляет несколько способов создания реактивных данных внутри setup:

  1. ref — создаёт примитивные реактивные значения:
import { ref } from 'vue';

setup() {
  const count = ref(0);

  function increment() {
    count.value++;
  }

  return { count, increment };
}
  • count автоматически становится реактивным.
  • Для доступа и изменения значения используется .value.
  1. reactive — создаёт реактивные объекты:
import { reactive } from 'vue';

setup() {
  const state = reactive({
    name: 'Vue',
    version: 3
  });

  function updateName(newName) {
    state.name = newName;
  }

  return { state, updateName };
}
  • Все свойства объекта state становятся реактивными.
  • Отличие от ref в том, что reactive работает с объектами и массивами напрямую, без необходимости использования .value.

Вычисляемые свойства (computed)

Для создания производных значений внутри setup используется computed:

import { ref, computed } from 'vue';

setup() {
  const count = ref(0);
  const double = computed(() => count.value * 2);

  return { count, double };
}
  • double автоматически обновляется при изменении count.
  • Поддерживает ленивое вычисление и кэширование значений.

Слоты и атрибуты через context

Функция setup позволяет работать с динамическими атрибутами и слотами:

setup(props, { attrs, slots }) {
  console.log(attrs);
  console.log(slots.default ? slots.default() : null);

  return {};
}
  • attrs содержит все переданные атрибуты, которые не объявлены как props.
  • slots позволяет рендерить переданные слоты программно.

Использование событий с emit

Для передачи событий родителю используется emit:

setup(props, { emit }) {
  const send = () => {
    emit('custom-event', { message: 'Hello' });
  };

  return { send };
}
  • Событие custom-event может быть обработано родительским компонентом.
  • Вызов emit можно выполнять из любого места внутри setup.

Жизненные циклы компонентов

Composition API предоставляет хуковые функции жизненного цикла внутри setup, заменяющие Options API:

import { onMounted, onUnmounted } from 'vue';

setup() {
  onMounted(() => {
    console.log('Компонент смонтирован');
  });

  onUnmounted(() => {
    console.log('Компонент будет уничтожен');
  });

  return {};
}
  • onMounted, onUpdated, onUnmounted, onBeforeMount и другие позволяют управлять жизненным циклом компонента в функциональном стиле.
  • Все хуки работают только внутри setup.

Организация логики через Composition API

setup позволяет разделять и повторно использовать логику компонентов через кастомные композиционные функции (composables):

// useCounter.js
import { ref } from 'vue';

export function useCounter() {
  const count = ref(0);
  const increment = () => count.value++;
  return { count, increment };
}

// Component.vue
import { useCounter } from './useCounter';

setup() {
  const { count, increment } = useCounter();
  return { count, increment };
}
  • Такой подход улучшает модульность и тестируемость кода.
  • Логика становится независимой от структуры компонентов.

Ограничения функции setup

  1. Не имеет доступа к this компонента.
  2. Нельзя напрямую использовать методы Options API внутри setup.
  3. Все реактивные объекты должны быть созданы через ref или reactive, иначе изменения не будут отслеживаться Vue.

Функция setup представляет собой мощный инструмент для создания компонентов с чистой, реактивной и легко повторно используемой логикой. Использование ref, reactive, computed, а также контекста и хуков жизненного цикла позволяет строить сложные интерфейсы без дублирования кода и с высокой предсказуемостью поведения.

Оглавление