Vue Academy · Урок

Зачем нужен Composition API

Ограничения Options API, проблема повторного использования логики, преимущества Composition API

«Зачем нужен Composition API» — бесплатный урок Vue Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 4 уроков всего.

Два способа писать на Vue

Vue 3 предлагает два стиля написания логики компонентов: API параметров и API композиции. Оба дают один и тот же результат, но организуют код совершенно по-разному.

Понимание компромиссов поможет Вам выбрать подходящий инструмент и уверенно разбираться в существующих кодовых базах.

Как API параметров организует код

API параметров разделяет компонент на фиксированные разделы: data, computed, methods, watch и хуки жизненного цикла. Каждая часть функциональности находится в отдельном разделе.

Для одной небольшой функции Вам может понадобиться изменить четыре разных блока файла.

export default {
  data() {
    return { count: 0 }
  },
  computed: {
    doubled() { return this.count * 2 }
  },
  methods: {
    increment() { this.count++ }
  }
}

Проблема: логика функций оказывается разбросанной

Когда компонент разрастается, логика одной функции (например, поля поиска) оказывается распределена между data, methods, computed и watch. Вам постоянно приходится прокручивать файл вверх и вниз, чтобы проследить работу одной функции.

Это называется проблемой фрагментации.

API композиции: группировка по функциям

API композиции позволяет разместить весь код одной логически связанной функции вместе. Реактивное состояние, производные значения и функции, которые их изменяют, находятся рядом.

Вы читаете код сверху вниз и видите всю функцию в одном месте.

import { ref, computed } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const doubled = computed(() => count.value * 2)
    function increment() { count.value++ }
    return { count, doubled, increment }
  }
}

Сравнение

Обратите внимание: во втором примере count, производное от него значение doubled и increment находятся вместе. В API параметров эти три части располагались в трех разных разделах.

API параметров: организация по типу параметра
API композиции: организация по логически связанной функции

Повторное использование логики: миксины (старый способ)

До появления API композиции главным инструментом повторного использования были миксины. Миксин объединяет свои параметры с параметрами компонента.

Но у миксинов есть реальные проблемы: конфликты имен, неочевидные источники свойств и неявные зависимости между миксинами.

const counterMixin = {
  data() { return { count: 0 } },
  methods: { increment() { this.count++ } }
}

export default {
  mixins: [counterMixin]
  // Where did count come from? Not obvious.
}

Повторное использование логики: компонуемые функции (новый способ)

Компонуемая функция — это обычная функция, которая использует API реактивности и возвращает реактивное состояние. Вы вызываете ее как любую другую функцию, поэтому источник каждого значения очевиден.

Никакого магического объединения и скрытых конфликтов имен.

import { ref } from 'vue'

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

Использование компонуемой функции

Импорт и вызов компонуемой функции ясно показывают, что count и increment берутся из useCounter. При деструктуризации их даже можно переименовать, чтобы избежать конфликтов.

import { useCounter } from './useCounter'

export default {
  setup() {
    const { count, increment } = useCounter()
    return { count, increment }
  }
}

Почему компонуемые функции лучше миксинов

Явные источники — каждое значение поступает из видимого вызова функции.
Нет конфликтов имен — Вы можете свободно деструктурировать и переименовывать значения.
Композиция — одна компонуемая функция может вызывать другую.
Удобство типизации — TypeScript автоматически выводит типы возвращаемых значений.

Улучшенная поддержка TypeScript и инструментов разработки

Поскольку API композиции построен на обычных функциях и переменных, TypeScript может выводить типы без специальных инструментов. Нет объекта this с типом, который пришлось бы задавать и поддерживать вручную, а редакторы предлагают точное автодополнение.

Когда что использовать

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

В новом коде Vue 3 обычно предпочитают API композиции, особенно вместе с <script setup>, с которым Вы скоро познакомитесь.

Быстрая проверка

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

Итоги

В этом уроке Вы узнали:

API параметров организует код по типу параметра, из-за чего функциональность оказывается разбросана по разделам.
API композиции группирует код по логически связанным функциям.
Миксины позволяют переиспользовать логику, но приводят к конфликтам имен и скрытым источникам.
Компонуемые функции — это обычные функции, возвращающие реактивное состояние: их источники явны, конфликты исключены, а сами функции можно компоновать.

Часто задаваемые вопросы

Урок «Зачем нужен Composition API» бесплатный?

Да — полный текст урока «Зачем нужен Composition API» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 4 уроков всего.

Чему я научусь в уроке «Зачем нужен Composition API»?

Ограничения Options API, проблема повторного использования логики, преимущества Composition API Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Vue Academy?

Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Зачем нужен Composition API»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Vue Academy?

Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

Зачем нужен Composition API
Функция setup() и реактивные переменные
ref и reactive: когда использовать каждый
Computed и Watch в Composition API

← Назад к Vue Academy