Чем отличаются типы Vue.js компонентов и как это влияет на код?

Компоненты Vue различают по способу описания и по роли в приложении.

По способу описания

• Однофайловые (SFC, `.vue`) — шаблон, скрипт и стили в одном файле. Основной вариант.
• Options API и Composition API — два стиля описания логики внутри компонента.
• Функциональные — без состояния, просто функция от props, возвращающая разметку.
• Асинхронные — загружаются по требованию через defineAsyncComponent.

По роли

• Презентационные — получают данные через props, отдают события.
• Контейнеры — загружают данные и работают со store.
• Страницы (views) — связаны с маршрутом.
• Глобальные и локальные — по способу регистрации: глобальные доступны везде, локальные импортируются явно (лучше для tree-shaking).

<script setup>
import UserCard from './UserCard.vue';
defineProps({ users: Array });
</script>

Как это влияет на код

Локальная регистрация и асинхронные компоненты уменьшают бандл, разделение на презентационные и контейнеры упрощает тесты.

Коротко для собеседования

SFC на Options или Composition API, функциональные и асинхронные; по роли — презентационные, контейнеры и страницы.

Подробнее: Vue — Основы компонентов