Используешь ли Composite API

Вопрос

Используешь ли Composite API

Профессия

Frontend Developer

Что хочет услышать интервьюер

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

Ключевые тезисы

• Да, я использую Composition API в проектах на Vue.js, так как он предлагает более гибкий и модульный подход к организации логики компонентов.
• Composition API позволяет мне группировать связанную логику в отдельных функциях, что улучшает читаемость и поддерживаемость кода.
• Я активно использую такие функции, как ref, reactive, computed и watch, для управления состоянием и реактивностью в компонентах.
• Composition API также упрощает повторное использование логики через механизм composable-функций, что делает код более модульным и масштабируемым.

Подробный ответ

Composition API — это современный подход к организации логики компонентов в Vue.js, который был введён в Vue 3. В отличие от Options API, Composition API позволяет разработчикам группировать связанную логику в отдельных функциях, что делает код более читаемым и поддерживаемым. Основные преимущества Composition API включают улучшенную модульность, возможность повторного использования логики через composable-функции, а также более гибкую работу с реактивными данными. Composition API активно использует такие функции, как ref, reactive, computed и watch, которые позволяют эффективно управлять состоянием и реактивностью компонентов. Этот подход особенно полезен в больших проектах, где важно поддерживать чистоту и структурированность кода. Кроме того, Composition API отлично интегрируется с TypeScript, что позволяет использовать статическую типизацию для повышения надежности и предсказуемости кода.

Практические примеры

Пример 1

Пример использования ref и computed:

import { ref, computed } from 'vue';

const count = ref(0);
const doubledCount = computed(() => count.value * 2);

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

Здесь count — реактивная переменная, а doubledCount — вычисляемое свойство, которое автоматически обновляется при изменении count.

Пример 2

Пример composable-функции для работы с состоянием:

import { ref, onMounted } from 'vue';

export function useFetch(url) {
  const data = ref(null);
  const error = ref(null);

  onMounted(async () => {
    try {
      const response = await fetch(url);
      data.value = await response.json();
    } catch (err) {
      error.value = err;
    }
  });

  return { data, error };
}

Эта функция может быть использована в любом компоненте для получения данных с сервера.

Пример 3

Пример интеграции Composition API с TypeScript:

import { ref, computed } from 'vue';

interface User {
  name: string;
  age: number;
}

const user = ref<User>({ name: 'John', age: 30 });
const isAdult = computed(() => user.value.age >= 18);

Здесь используется TypeScript для типизации данных пользователя.

Частые ошибки

• Ошибка: Неправильное использование reactive вместо ref для примитивных значений. reactive работает только с объектами, а ref — с любыми типами данных.
• Ошибка: Неправильное именование composable-функций. Имена должны начинаться с use, чтобы четко указывать на их назначение.

Связанные темы

• Options API — традиционный подход в Vue.js, который может быть полезен для небольших проектов или для тех, кто только начинает изучать Vue.
• TypeScript — язык, который активно используется с Composition API для улучшения типизации и безопасности кода.
• Pinia — современная библиотека для управления состоянием в Vue.js, которая хорошо сочетается с Composition API.

Follow-up вопросы

Какие преимущества Composition API перед Options API ты можешь назвать?

Уровень: basic

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

Как ты организуешь логику в composable-функциях? Приведи пример.

Уровень: intermediate

Я группирую связанную логику (например, работу с API, управление состоянием) в отдельные функции, которые возвращают нужные данные и методы. Например, useUserAuth может содержать логику входа, выхода и проверки авторизации.

Как Composition API работает с TypeScript? Есть ли особенности?

Уровень: intermediate

Composition API лучше интегрируется с TypeScript, так как позволяет явно типизировать возвращаемые значения и параметры функций. Например, ref и reactive можно типизировать дженериками, что улучшает автодополнение и проверку типов.

Какие проблемы могут возникнуть при переходе с Options API на Composition API?

Уровень: advanced

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

Как ты тестируешь компоненты, написанные с использованием Composition API?

Уровень: intermediate

Я использую Jest и Vue Test Utils, тестируя composable-функции изолированно, а также проверяю реактивность и side effects. Например, можно мокать вызовы API и проверять изменения состояния.