Skip to main content

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

VueJunior~1 хв читання
Запропонувати правку

v-if і v-show - обидві директиви, які керують відображенням елемента, але працюють принципово по-різному. Це одне з найчастіших питань на співбесідах.

Головна відмінність

v-if - повністю видаляє/створює елемент у DOM.

v-show - просто змінює CSS-властивість display (приховує/показує).

Детальне порівняння

1. Як це влаштовано

v-if

  • елемент створюється, коли умова true
  • елемент видаляється, коли умова false
  • кожне перемикання → реальна зміна DOM
html
<div v-if="visible">Hello</div>

v-show

  • елемент завжди існує в DOM
  • Vue лише змінює стиль:
css
display: none;
html
<div v-show="visible">Hello</div>

2. Продуктивність

v-if - важчий при частих перемиканнях

Тому що:

  • створюється новий DOM-елемент
  • викликаються lifecycle-хуки (mounted, unmounted)
  • Vue перераховує віртуальний DOM

v-show - легший при частому показі/прихованні

Змінюється лише CSS.

3. Коли використовувати?

Використовуй v-if, якщо:

  • елемент показується рідко
  • рендер елемента дорогий (складні компоненти, великі списки)
  • потрібно повністю видалити елемент з DOM (наприклад, модалка, дорогі блоки)

Приклад: елемент видно лише після завантаження даних.

Використовуй v-show, якщо:

  • потрібно часто перемикати відображення (меню, вкладки, акордеони)
  • немає сенсу перестворювати елемент
  • вміст простий і легкий

4. <template> працює лише з v-if

html
<template v-if="show"> <h1>Заголовок</h1> <p>Текст</p> </template>

Для v-show <template> не має сенсу - він має бути саме на елементі.

5. Анімації

  • v-if працює з enter/leave animations (елемент з'являється/зникає)
  • v-show працює лише з visibility animations (елемент залишається в DOM)

Приклад порівняння

v-if

html
<div v-if="isOpen">Вміст</div>

Результат:

  • isOpen = false → елемента НЕМАЄ в DOM
  • isOpen = true → елемент додасться

v-show

html
<div v-show="isOpen">Вміст</div>

Результат:

  • елемент ЗАВЖДИ є в DOM
  • isOpen = false → display: none
  • isOpen = true → display: block

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Запропонувати правку