Что такое Composition API в Vue 3

1️⃣ Как кратко ответить

Composition API в Vue 3 — это набор функций, который позволяет организовывать и переиспользовать логику компонентов более гибко и удобно, чем Options API. Он предоставляет такие функции, как setup(), ref(), reactive(), которые помогают управлять состоянием и жизненным циклом компонентов.

2️⃣ Подробное объяснение темы

Composition API в Vue 3 — это новый способ организации и управления логикой компонентов, который был введен для решения некоторых ограничений, связанных с Options API. Основная идея заключается в том, чтобы улучшить переиспользование кода и сделать его более читаемым и поддерживаемым, особенно в сложных приложениях.

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

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

2. Гибкость: Он предоставляет более гибкий способ организации кода, позволяя группировать связанные части логики вместе, независимо от их типа (состояние, методы, жизненный цикл).

3. Чистота кода: Упрощает структуру компонентов, особенно когда они становятся большими и содержат много различных опций.

Основные концепции Composition API

• setup(): Это функция, которая выполняется перед созданием компонента. Она используется для инициализации состояния и определения реактивных данных. Все, что возвращается из setup(), становится доступным в шаблоне компонента.

• ref(): Создает реактивную ссылку на примитивное значение. Это позволяет отслеживать изменения значения и автоматически обновлять связанные с ним части интерфейса.

• reactive(): Создает реактивный объект, который отслеживает изменения всех его свойств. Это полезно для работы с объектами и массивами.

Пример использования Composition API

import { ref, reactive, onMounted } from 'vue';
​
export default {
  setup() {
    // Создаем реактивную ссылку для примитивного значения
    const count = ref(0);
​
    // Создаем реактивный объект для более сложной структуры данных
    const user = reactive({
      name: 'John Doe',
      age: 30
    });
​
    // Функция для увеличения счетчика
    function increment() {
      count.value++;
    }
​
    // Хук жизненного цикла, который срабатывает после монтирования компонента
    onMounted(() => {
      console.log('Component has been mounted');
    });
​
    // Возвращаем данные и методы, чтобы они были доступны в шаблоне
    return {
      count,
      user,
      increment
    };
  }
};

Объяснение кода

• import { ref, reactive, onMounted } from 'vue';: Импортируем необходимые функции из Vue для создания реактивных данных и работы с жизненным циклом.

• const count = ref(0);: Создаем реактивную ссылку для переменной count, инициализируя ее значением 0. ref() используется для примитивных значений.

• const user = reactive({ name: 'John Doe', age: 30 });: Создаем реактивный объект user с двумя свойствами. reactive() используется для объектов и массивов.

• function increment() { count.value++; }: Определяем функцию increment, которая увеличивает значение count. Для доступа к значению ref используется .value.

• onMounted(() => { console.log('Component has been mounted'); });: Используем хук жизненного цикла onMounted, который выполняется после монтирования компонента. Это аналогично mounted в Options API.

• return { count, user, increment };: Возвращаем реактивные данные и методы, чтобы они были доступны в шаблоне компонента.

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