В чем разница между v-show и v-if

Ответ

v-if и v-show управляют видимостью элементов, но работают по-разному:

  1. v-if:

    • Полностью удаляет/добавляет элемент из DOM
    • Ленивый: элементы внутри не рендерятся, пока условие не станет true
    • Подходит для редко меняющихся условий
  2. v-show:

    • Всегда рендерит элемент в DOM, просто переключает display: none
    • Подходит для частых переключений (лучше для производительности)
    • Не поддерживает <template> и v-else

Пример:

<div v-if="isVisible">Удалится из DOM</div>
<div v-show="isVisible">Спрячется через CSS</div>

Выбор зависит от частоты переключений и важности начального рендеринга.