Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Чим відрізняється v-if від v-show?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)`v-if` і `v-show` - обидві директиви керують відображенням елемента, **але працюють принципово по-різному**: `v-if` повністю видаляє чи створює елемент у DOM, а `v-show` просто змінює CSS-властивість `display` (приховує/показує). **Ключове:** використовуй `v-if`, коли елемент показується рідко або його рендер дорогий, і `v-show`, коли потрібно часто перемикати відображення.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення`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`Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.