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

Разница между v-show и v-if в Vue.js

v-show и v-if — это два основных способа управления видимостью элементов в Vue.js. Хотя результат выглядит одинаково (элемент видимый или скрытый), механизм работы кардинально отличается, что влияет на производительность и функциональность.

v-if — условное рендерирование

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

<template>
  <div>
    <button @click="showContent = !showContent">
      Toggle Content
    </button>
    
    <!-- Элемент полностью удаляется из DOM, когда showContent = false -->
    <div v-if="showContent" class="content">
      <p>Содержимое видно</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return { showContent: true };
  }
};
</script>

Характеристики v-if:

• Полностью удаляет элемент из DOM если условие false
• При true добавляет элемент обратно в DOM
• Пересчитывает компонент при переключении
• Все обработчики событий и дочерние компоненты переинициализируются
• Более дорого при частом переключении

v-show — управление видимостью CSS

v-show просто скрывает элемент через CSS (display: none), но он остается в DOM:

<template>
  <div>
    <button @click="showContent = !showContent">
      Toggle Content
    </button>
    
    <!-- Элемент всегда в DOM, просто скрыт через display: none -->
    <div v-show="showContent" class="content">
      <p>Содержимое видно</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return { showContent: true };
  }
};
</script>

Характеристики v-show:

• Элемент всегда остается в DOM
• Переключает CSS свойство display (none / block)
• Не переинициализирует компонент
• Все обработчики событий остаются активными
• Быстрее при частом переключении

Таблица сравнения

                        v-if                v-show
─────────────────────────────────────────────────────
Действие                Добавляет/удаляет    Скрывает через CSS
                        элемент из DOM       (display: none)
В DOM                   Нет, если false      Всегда присутствует
Переинициализация       Да, при переключении Нет
Обработчики событий     Удаляются/создаются  Остаются активными
Лайфцикл компонента    Полный цикл          Не запускается
Производительность     Лучше при редком     Лучше при частом
                        переключении         переключении
Ленивая загрузка        Да (нет рендера)     Нет (всегда рендер)
Условные else/else-if   Поддерживает         Не поддерживает
─────────────────────────────────────────────────────

Пример различия в действии

<template>
  <div>
    <button @click="toggle">Toggle</button>
    
    <!-- v-if: элемент удаляется из DOM -->
    <div v-if="isVisible" class="box">
      <input v-model="inputValue" placeholder="Введи текст" />
      <p>{{ inputValue }}</p>
    </div>
    
    <!-- v-show: элемент скрыт, но в DOM остается -->
    <div v-show="isVisible" class="box">
      <input v-model="inputValue2" placeholder="Введи текст" />
      <p>{{ inputValue2 }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true,
      inputValue: '',
      inputValue2: ''
    };
  },
  methods: {
    toggle() {
      this.isVisible = !this.isVisible;
    }
  }
};
</script>

При переключении:

• v-if: Input удаляется из DOM, значение inputValue теряется
• v-show: Input скрывается, но значение inputValue2 сохраняется

Практические примеры

1. Редкое переключение — используй v-if

<!-- Модальное окно - редко переключается -->
<div v-if="showModal" class="modal">
  <ModalContent @close="showModal = false" />
</div>

2. Частое переключение — используй v-show

<!-- Меню навигации - часто переключается -->
<nav v-show="isMenuOpen" class="menu">
  <!-- Содержимое меню -->
</nav>

3. Условные блоки — используй v-if

<div>
  <div v-if="status === 'loading'">
    Loading...
  </div>
  <div v-else-if="status === 'success'">
    Success!
  </div>
  <div v-else>
    Error occurred
  </div>
</div>

Условные директивы с v-if

v-if поддерживает v-else-if и v-else:

<div v-if="score >= 90">Grade A</div>
<div v-else-if="score >= 80">Grade B</div>
<div v-else-if="score >= 70">Grade C</div>
<div v-else>Grade F</div>

<!-- v-show НЕ поддерживает v-else! -->

Производительность

<!-- Частое переключение - v-show быстрее -->
<template>
  <div>
    <button @click="toggleFast">Toggle (1000 раз за секунду)</button>
    
    <!-- v-if = много создания/удаления элементов = медленно -->
    <div v-if="showFast">Content</div>
    
    <!-- v-show = просто toggle CSS = быстро -->
    <div v-show="showFast">Content</div>
  </div>
</template>

Lifecycle с v-if

<script>
export default {
  components: {
    Child: {
      mounted() { console.log('Child mounted'); },
      unmounted() { console.log('Child unmounted'); }
    }
  }
};
</script>

<template>
  <!-- При toggle: mounted/unmounted вызываются для Child -->
  <Child v-if="isVisible" />
  
  <!-- При toggle: mounted/unmounted НЕ вызываются -->
  <Child v-show="isVisible" />
</template>

Рекомендации

Используй v-if когда:

• Условие редко меняется
• Нужны v-else / v-else-if
• Нужна ленивая загрузка
• Компонент дорогой в рендере
• Нужно сэкономить память (удаление из DOM)

Используй v-show когда:

• Часто переключается видимость
• Нужно сохранить состояние компонента
• Простое скрытие элемента
• Нужна максимальная производительность

Итог

v-if и v-show имеют разные варианты использования. Выбор между ними зависит от частоты переключения и требований вашего приложения. Быстрое правило: если переключаешь часто → v-show, если редко → v-if.