В чем разница между директивами v-show и v-if?vue-4

Хотя обе директивы управляют видимостью элементов, они работают принципиально по-разному. Вот детальное сравнение:

Основные различия

1. Механизм работы

<div v-if="condition">v-if content</div>
<div v-show="condition">v-show content</div>
  • v-if: Полностью удаляет элемент из DOM при false и создает заново при true
  • v-show: Всегда сохраняет элемент в DOM, переключая только CSS-свойство display: none/block

2. Инициализация компонента

data() {
  return { isActive: false }
}
  • v-if: Ленивая инициализация. Внутренний компонент:
    • Не инициализируется, если условие изначально false
    • Хуки жизненного цикла (created, mounted) не вызываются
  • v-show: Компонент инициализируется всегда, независимо от условия

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

Сценарий v-if v-show
Первый рендер Быстрее (если false) Медленнее (всегда рендерит)
Частые переключения Медленнее (пересоздание DOM) Быстрее (только CSS)
Сложный контент Эффективнее для редко показываемых элементов Лучше для частых переключений

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

Когда использовать v-if:

  1. Редко используемые элементы:
<admin-panel v-if="user.isAdmin"/>
  1. Тяжелые компоненты:
<data-visualization v-if="showChart"/>  <!-- Не загружать если не нужно -->
  1. Сложные условия:
<template v-if="Array.isArray(data) && data.length > 0">
  <!-- контент -->
</template>

Когда использовать v-show:

  1. Частые переключения:
<mobile-menu v-show="isMobileView"/>
  1. Простые элементы:
<div v-show="isLoading" class="loader"></div>
  1. Когда нужно сохранять состояние:
<input v-show="isEditing" v-model="text">  <!-- Сохраняет значение при скрытии -->

Особенности поведения

1. Анимации и переходы

  • v-if: Полноценно работает с <transition>
<transition name="fade">
  <div v-if="show">Content</div>
</transition>
  • v-show: Ограниченная поддержка анимаций

2. Ссылки и refs

  • v-if: При false refs становятся undefined
  • v-show: Ref всегда доступен, даже когда элемент скрыт

3. Влияние на дочерние компоненты

<child-component v-if="false"/>  <!-- Хуки жизненного цикла не вызываются -->
<child-component v-show="false"/> <!-- Все хуки выполняются -->

Оптимизация производительности

  1. Для статического контента, который никогда не изменится:
<div v-if="false" style="display: none">  <!-- Аналог v-show но без реактивности -->
  1. Комбинация подходов:
<template v-if="hasData">
  <chart-component v-show="isChartVisible"/>
</template>

Резюмируем:

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

Вопросы

Собеседования