питання на співбесіді Vue

У чому різниця між ref і reactive? Коли обрати кожен?

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

Як працює реактивність у Vue 3? Що робить Proxy під капотом?

Vue 3 загортає стан у Proxy, який перехоплює читання властивостей, щоб відстежити залежні від них ефекти, і запис, щоб ці ефекти запустити. На відміну від Object.defineProperty у Vue 2, Proxy бачить додавання й видалення властивостей і працює з масивами та Map, тому Vue.set більше не потрібен. Плата за це — вимога сучасних браузерів і втрата реактивності в момент, коли ви деструктуруєте значення з проксі.

Поясніть різницю між computed і watch.

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

Назвіть хуки життєвого циклу у Vue 3.

У Composition API це onBeforeMount і onMounted, onBeforeUpdate і onUpdated, onBeforeUnmount і onUnmounted, плюс onErrorCaptured, onActivated і onDeactivated для кешованих компонентів. Сам setup() замінює beforeCreate і created. В onMounted місце для доступу до DOM і підписок, а в onUnmounted їх обовʼязково треба зняти.

Що таке слоти? Наведіть приклад scoped slot.

Слот — це місце в шаблоні дочірнього компонента, яке батько заповнює своєю розміткою, завдяки чому компоненти-обгортки стають перевикористовуваними. Scoped slot додатково передає дані назад з дитини у вміст слота — наприклад компонент списку сам займається завантаженням і перебором, а батько вирішує, як відмалювати кожен елемент. Це інвертує контроль: за поведінку відповідає дитина, за представлення — батько.

Як передати дані від дочірнього компонента до батьківського?

Дитина оголошує події через defineEmits і викликає emit з корисним навантаженням, а батько слухає їх через v-on. Для двостороннього звʼязування одного значення v-model це синтаксичний цукор над пропом і подією оновлення. Напряму змінювати проп не можна, бо це ламає односпрямований потік даних, який робить зміни стану відстежуваними.

Що таке Pinia і чим вона краща за Vuex?

Pinia — офіційна бібліотека стану для Vue 3: стори це звичайні функції зі state, getters і actions, а мутацій немає взагалі. Вона виводить типи TypeScript без ручних анотацій, за замовчуванням підтримує модульні стори замість вкладених модулів і працює і з Options, і з Composition API. Підсумок — менше шаблонного коду й набагато краща підтримка в редакторі, ніж у Vuex.

У чому різниця між v-if і v-show?

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