Як працює v-if?
v-if - це директива Vue для умовного рендерингу, яка додає або видаляє елемент з DOM залежно від виразу.
Простіше кажучи:
Якщо умова істинна - елемент створюється і вставляється в DOM. Якщо хибна - елемент видаляється повністю.
Як працює v-if
Приклад:
<p v-if="isVisible">Привіт!</p>Якщо isVisible = true → Vue створює елемент
Якщо isVisible = false → елемент видаляється
v-if, v-else-if, v-else
<div v-if="status === 'success'">Успіх</div>
<div v-else-if="status === 'error'">Помилка</div>
<div v-else>Невідомо</div>Життєвий цикл v-if
Коли умова змінюється:
- Якщо вона переходить в true, Vue створює новий DOM-елемент, виконує всі хуки (mounted, updated тощо).
- Якщо в false, Vue видаляє елемент з DOM, викликаючи хуки unmounted.
Це важливо на співбесіді.
Важливі особливості
1. v-if використовується для рідкісного відображення елементів
Наприклад, модалки, важкі списки, складні блоки.
Тому що щоразу елемент створюється і знищується → витратніше.
2. v-if не можна використовувати з v-for на одному елементі (Vue 3)
Не можна:
<div v-for="item in items" v-if="item.visible"></div>Але можна:
<template v-for="item in items">
<div v-if="item.visible">{{ item.name }}</div>
</template>Або фільтрувати дані заздалегідь.
3. Групування через <template>
<template v-if="show">
<h1>Заголовок</h1>
<p>Текст</p>
</template><template> не рендериться в DOM - тільки його вміст.
4. Відмінності від v-show
v-if | v-show |
|---|---|
| повністю видаляє/створює вузол | просто приховує через display: none |
| дорожче за продуктивністю при частих перемиканнях | дорожче при першому рендері |
| підходить для рідко відображуваного контенту | підходить для частих перемикань |
Приклад з анімацією (transition + v-if)
Vue розуміє enter/leave transitions:
<transition>
<p v-if="visible">Hello!</p>
</transition>Коли visible змінюється, Vue запускає CSS-анімацію появи або зникнення.
Коротка відповідь
Для співбесідиКоротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.