PassFront
  1. PassFront
  2. База знаний
  3. Компоненты

Делишь ли Vue компоненты на глупые и умные?

Компоненты

Да, разделение на «глупые» (презентационные) и «умные» (контейнеры) компоненты полезно и во Vue: оно отделяет отображение от логики получения данных.

Глупые компоненты

  • Получают всё через props и сообщают о действиях через события.
  • Не знают про API, store и роутер.
  • Легко переиспользовать и тестировать.
<UserCard :user="user" @remove="onRemove" />

Умные компоненты

  • Загружают данные, работают со store, обрабатывают события.
  • Передают готовые данные в глупые компоненты.

Как это выглядит сейчас

С Composition API логику удобно выносить в composables (useUsers()), поэтому жёсткое разделение не всегда нужно: компонент может сам вызвать composable, а разметку отдать дочерним компонентам.

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

Да: презентационные компоненты получают данные через props и отдают события, контейнеры работают с данными; в Vue 3 логику часто выносят в composables.

Подробнее: Vue — Composables

Другие вопросы раздела