Декларативный и императивный подход

↑ 8.1 Парадигмы: ООП, ФП, SOLID · ← Предыдущая · → Следующая

Желательно~3 мин чтенияУровень: senior

Зачем это на собесе

Объясняет, почему Vue и React «проще» jQuery, и когда императивный код неизбежен.

Различие

• Императивный: описываем как сделать по шагам (управляем состоянием и DOM).
• Декларативный: описываем что хотим получить, а исполнение делегируем платформе или фреймворку.

// императивно (jQuery-подход)
const list = document.getElementById('list')!
list.innerHTML = ''
for (const u of users) {
  if (!u.active) continue
  const li = document.createElement('li')
  li.textContent = u.name
  list.appendChild(li)
}

<!-- декларативно -->
<ul>
  <li v-for="u in users.filter(u => u.active)" :key="u.id">{{ u.name }}</li>
</ul>

// данные: императивно и декларативно
let total = 0
for (const o of orders) if (o.paid) total += o.sum
 
const total2 = orders.filter(o => o.paid).reduce((s, o) => s + o.sum, 0)

Что даёт декларативность

• меньше ручного управления состоянием DOM;
• UI = функция(состояние);
• проще читать, тестировать, оптимизировать фреймворком;
• меньше багов рассинхронизации.

Примеры в стеке

CSS, HTML, SQL, шаблоны Vue, Router-конфиг, XState-машины, Terraform/Kubernetes — декларативные описания.

Где нужен императивный код

• работа с Canvas и WebGL;
• фокус, скролл, измерение DOM (через ref и хуки);
• интеграция сторонних библиотек (карты, графики);
• критичные по производительности участки.

Хорошая практика: императивный код прячем за декларативным интерфейсом (компонент-обёртка, директива, composable).

Вопросы с ответами

Чем декларативный подход лучше?

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

Как сочетать с императивным API сторонней библиотеки?

Обернуть в компонент или composable: снаружи props и события, внутри onMounted/onBeforeUnmount и watch для синхронизации.