Какие плюсы и минусы Composition API по сравнению с Options API?

Composition API vs Options API в Vue

Vue 3 представил новый подход к написанию компонентов. Composition API похож на React hooks, в то время как Options API — старый синтаксис Vue 2. Оба работают в Vue 3, но имеют разные преимущества.

Options API (старый способ)

export default {
  data() {
    return {
      count: 0,
      message: 'Hello'
    };
  },
  computed: {
    doubled() {
      return this.count * 2;
    }
  },
  methods: {
    increment() {
      this.count++;
    }
  },
  watch: {
    count(newVal) {
      console.log('Count changed:', newVal);
    }
  },
  mounted() {
    console.log('Component mounted');
  }
};

Composition API (новый способ)

import { ref, computed, watch, onMounted } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const message = ref('Hello');

    const doubled = computed(() => count.value * 2);

    const increment = () => {
      count.value++;
    };

    watch(count, (newVal) => {
      console.log('Count changed:', newVal);
    });

    onMounted(() => {
      console.log('Component mounted');
    });

    return { count, message, doubled, increment };
  }
};

Плюсы Options API

1. Структурировано и предсказуемо

// Всё на месте
export default {
  data() { }, // данные
  computed() { }, // вычисляемые
  methods() { }, // методы
  watch() { }, // наблюдатели
  mounted() { } // хуки жизни
};

// Новичку сразу понятна структура

2. Меньше boilerplate

// Options
data() {
  return { count: 0 };
}

// Composition требует
const count = ref(0); // нужно оборачивать

3. Привычнее для Vue 2 разработчиков

// Синтаксис не изменился со времён Vue 2
// Легко мигрировать старый код

4. Лучше для маленьких компонентов

// Маленький компонент с Options API очень читаемо
export default {
  data() { return { isOpen: false }; },
  methods: {
    toggle() { this.isOpen = !this.isOpen; }
  }
};

Минусы Options API

1. Logic Fragmentation — логика рассеяна по разным местам

// Логика связана с фильтром
// Но разбита на несколько мест

export default {
  data() {
    return {
      searchQuery: '',
      selectedCategory: null,
      filteredItems: []
    };
  },
  computed: {
    // Часть логики
    filteredByCategory() {
      return items.filter(i => i.category === this.selectedCategory);
    }
  },
  methods: {
    // Другая часть логики
    handleSearch(query) {
      this.searchQuery = query;
      this.updateFiltered();
    }
  },
  watch: {
    // Ещё часть логики
    searchQuery() {
      this.updateFiltered();
    }
  }
};

// Нужно скакать туда-сюда по файлу

2. Плохо масштабируется

// Когда компонент большой (500+ строк)
// Становится сложно ориентироваться

export default {
  data() { /* 50 свойств */ },
  computed: { /* 20 вычисляемых */ },
  methods: { /* 30 методов */ },
  watch: { /* 15 наблюдателей */ },
  // Какой метод где? Нужно искать
};

3. Переиспользование логики сложнее

// Несколько компонентов нужна одна логика
// Options API требует mixins (плохо)

const filterMixin = {
  data() { return { query: '' }; },
  methods: { setQuery() {} },
  watch: { query() {} }
};

// Проблемы: конфликты имён, неясные зависимости

4. TypeScript поддержка плохая

// Options API с TypeScript выглядит плохо
export default {
  data(): { count: number } {
    return { count: 0 };
  },
  methods: {
    increment(this: any) { // this типизируется сложно
      this.count++;
    }
  }
};

Плюсы Composition API

1. Логика в одном месте

// Вся логика фильтрации вместе
const useFilter = () => {
  const searchQuery = ref('');
  const selectedCategory = ref(null);

  const filteredByCategory = computed(() => {
    return items.filter(i => i.category === selectedCategory.value);
  });

  const handleSearch = (query) => {
    searchQuery.value = query;
  };

  watch(searchQuery, () => {
    // обновляем
  });

  return { searchQuery, selectedCategory, filteredByCategory, handleSearch };
};

// Намного понятнее!

2. Переиспользование логики

// Extracted composable
const useCounter = () => {
  const count = ref(0);
  const doubled = computed(() => count.value * 2);
  const increment = () => { count.value++; };
  return { count, doubled, increment };
};

// Использование в разных компонентах
export default {
  setup() {
    const counter1 = useCounter();
    const counter2 = useCounter();
    return { counter1, counter2 };
  }
};

// Чистое переиспользование, нет конфликтов

3. Отличная TypeScript поддержка

// Type safety из коробки
const count = ref<number>(0);
const items = ref<Item[]>([]);

const increment = (amount: number): void => {
  count.value += amount;
};

// Всё типизировано правильно

4. Tree-shaking и оптимизация

// Неиспользуемая логика удалится при build
const useUnused = () => {
  // Если эта функция не импортируется, удалится
};

5. Похож на React Hooks

// Composition API очень похож на React
// Если знаешь React, быстро освоишь Vue

const useAuth = () => {
  const user = ref(null);
  const login = async (email) => { /* ... */ };
  return { user, login };
};

// То же самое в React
const useAuth = () => {
  const [user, setUser] = useState(null);
  const login = async (email) => { /* ... */ };
  return { user, login };
};

Минусы Composition API

1. Больше boilerplate

// Нужно импортировать функции
import { ref, computed, watch, onMounted } from 'vue';

// Options API требует меньше
data() { /* ready */ }

2. Крутая кривая обучения

// Нужно понять ref и reactive
const count = ref(0);
count.value++ // зачем value?

const user = reactive({ name: 'John' });
user.name++ // а здесь без value

// Запутанно для новичков

3. Нужно явно указывать возвращаемые значения

// В Options всё видимо из структуры
export default {
  data() { return { x: 1 }; } // видимо
  methods: { foo() {} } // видимо
};

// В Composition нужно помнить что вернуть
setup() {
  const x = ref(1);
  const foo = () => {};
  return { x, foo }; // нужно явно
}

Когда использовать какой?

Options API лучше для:

• Маленьких компонентов (< 200 строк)
• Команд без опыта с JavaScript функциональным стилем
• Legacy проектов Vue 2
• Простых UI компонентов

Composition API лучше для:

• Больших компонентов с сложной логикой
• Переиспользуемых composables
• TypeScript проектов
• Команд знакомых с React/функциональным стилем
• Новых проектов

Конец Options API?

Vue 3 поддерживает оба подхода, но документация ориентирует на Composition API. Options API не уходит, но постепенно становится второго плана.

Итог

• Options API: структурировано, для начинающих, маленькие компоненты
• Composition API: мощно, масштабируемо, переиспользуемо, сложнее
• Vue 3 поддерживает оба
• Новые проекты → Composition API
• Legacy → Options API если уже есть