Junior Vue Frontend — Питання на співбесіді Vue

Чим `ref` відрізняється від `reactive`?

ref обгортає будь-яке значення, і в скрипті до нього звертаються через .value, хоча шаблон розгортає сам. reactive приймає обʼєкт і повертає реактивний проксі без обгортки. Практичне правило — ref на все, бо деструктуризація reactive-обʼєкта втрачає реактивність, і це дивує щоразу.

Чим `computed` відрізняється від `watch`?

computed виводить значення і кешує його, доки не зміниться залежність: він мусить бути чистим і щось повертати. watch виконує побічний ефект при зміні: запит, запис у сховище. Використання watch заради встановлення іншого шматка стану — зазвичай computed, який ще не розпізнали.

Чим `v-if` відрізняється від `v-show`?

v-if додає і прибирає елемент із DOM, тобто компонент створюється і знищується. v-show лишає його на місці й перемикає CSS. v-if — коли змінюється рідко або дорогий у відмальовуванні, v-show — коли перемикається часто: вкладка, яку клацають постійно, не має перезбирати своє піддерево.

Навіщо `v-for` потрібен `key`?

Щоб Vue зіставляв елементи між відмальовуваннями, а не виходив із позиції. Без стійкого ключа він патчить за індексом і перевикористовує не той вузол DOM: позначений чекбокс лишається на рядку, що зайняв цю позицію, а не йде за своїм елементом. Індекс — ключ лише за назвою для всього, що можна переупорядкувати.

Як дочірній компонент передає дані нагору?

Випускаючи подію, яку слухає батько. Пропси йдуть униз, події вгору: дочірній не змінює пропс, і Vue попереджає при спробі. defineModel і шаблон v-model — та сама пара з домовленістю про іменування зверху.

Якими хуками життєвого циклу реально користуються?

onMounted для всього, що потребує DOM чи першого завантаження, onUnmounted щоб це відкотити: слухач, таймер, підписка. onUpdated рідко буває правильною відповіддю і часто виявляється місцем, де починаються нескінченні цикли. У Composition API це функції, які викликають усередині setup, а не опції компонента.