Чем отличается V от V-Show?

Сравнение директив v-if и v-show во Vue.js

Это фундаментальный вопрос, который проверяет понимание реактивной системы Vue и жизненного цикла компонентов. Обе директивы управляют видимостью элементов в DOM, но делают это принципиально разными способами, что влияет на производительность, поведение компонентов и подходит для разных сценариев.

Ключевые различия в работе

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

Директива v-if выполняет полное создание или удаление элемента из DOM в зависимости от истинности условия. Это не просто скрытие — Vue полностью уничтожает компонент или элемент, когда условие ложно, и создает заново, когда оно становится истинным.

<template>
  <!-- Элемент будет полностью удален из DOM при false -->
  <div v-if="isVisible">
    <ExpensiveComponent />
    Сложный контент с дочерними компонентами
  </div>
</template>

v-show — условное отображение

Директива v-show всегда рендерит элемент в DOM, но управляет его видимостью через CSS-свойство display. Когда условие ложно, элементу присваивается display: none.

<template>
  <!-- Элемент всегда в DOM, но скрыт через CSS -->
  <div v-show="isVisible">
    Контент, который нужно быстро показывать/скрывать
  </div>
</template>

Детальное сравнение характеристик

1. Влияние на жизненный цикл компонента

• v-if:

  • При false: вызываются хуки beforeDestroy и destroyed
  • При true: вызываются хуки beforeCreate, created, beforeMount, mounted
  • Полная переинициализация всех реактивных связей, вычисляемых свойств и вотчеров

• v-show:

  • Хуки жизненного цикла вызываются только один раз при первоначальном рендеринге
  • Состояние компонента сохраняется при переключении видимости

2. Производительность и использование памяти

• v-if подходит для условий, которые редко меняются:

  • Экономит память, когда элемент не отображается
  • Имеет большую стоимость переключения из-за полной пересборки

  // Хорошо для редко меняющихся условий
  <AdminPanel v-if="user.role === 'admin'" />
  

• v-show эффективен при частых переключениях:

  • Постоянно потребляет память, так как элемент остается в DOM
  • Имеет низкую стоимость переключения (только изменение CSS)

  // Идеально для частых toggle-операций
  <ModalWindow v-show="isModalOpen" />
  

3. Особенности рендеринга

• v-if поддерживает связку с v-else и v-else-if:

  <div v-if="type === 'A'">Контент A</div>
  <div v-else-if="type === 'B'">Контент B</div>
  <div v-else>Контент по умолчанию</div>
  

• v-show не работает с v-else и всегда требует отдельного условия

4. Воздействие на DOM и стили

• v-if: Может вызвать "скачки" макета при добавлении/удалении
• v-show: Сохраняет место в потоке документа даже при display: none

Практические рекомендации по выбору

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

• Условие меняется редко (менее 1 раза в секунду)
• Элемент содержит ресурсоемкие дочерние компоненты
• Нужна экономия памяти на мобильных устройствах
• Требуется условная логика с v-else цепочками
• Элемент содержит пользовательские директивы, которые должны переинициализироваться

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

• Необходимо быстрое переключение видимости (анимации, toggle UI)
• Нужно сохранить состояние компонента (форма с заполненными данными)
• Элемент используется в CSS-анимациях или транзишенах
• Условие меняется очень часто (например, при скролле или анимациях)

Пример комплексного использования

<template>
  <div class="app">
    <!-- Редко меняется, содержит тяжелые компоненты -->
    <AdminDashboard v-if="user.isAdmin && features.adminPanel" />
    
    <!-- Часто переключается, нужно сохранять состояние формы -->
    <UserSettings v-show="activeTab === 'settings'" />
    
    <!-- Частые переключения, простые элементы -->
    <div class="tooltip" v-show="showTooltip">
      Подсказка с анимацией появления
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: { isAdmin: true },
      features: { adminPanel: true },
      activeTab: 'profile',
      showTooltip: false
    }
  }
}
</script>

Важные нюансы

1. С v-if элементы внутри не инициализируются до первого true-условия
2. v-show с false на момент монтирования не предотвращает выполнение mounted хука
3. Для v-if существует специальная директива v-cloak для борьбы с мерцанием нескомпилированного шаблона
4. В Vue 3 поведение в основном сохранилось, но оптимизации компилятора могут по-разному обрабатывать эти директивы

Вывод: Выбор между v-if и v-show — это всегда компромисс между потреблением памяти и скоростью переключения. Понимание этих различий критически важно для создания производительных Vue-приложений с оптимальным управлением состоянием и ресурсами.