Vue.js — популярный JavaScript-фреймворк для создания динамичных веб-приложений. Он умеет рендерить разметку на основе данных и событий, что особенно полезно для интерактивных интерфейсов. В этой статье вы узнаете, что такое директивы Vue и как с их помощью реализовать условный рендеринг.

Что такое директивы Vue

Директивы Vue — это специальные атрибуты в шаблонах, которые расширяют поведение HTML-элементов. Директивы начинаются с префикса v- и дают доступ к реактивности, привязке данных, прослушиванию событий и управлению DOM.

Коротко:

• v-if — условный рендеринг (вставка/удаление из DOM).
• v-else, v-else-if — ветвления для v-if.
• v-show — переключение видимости через CSS.
• v-for — рендер списка.
• v-bind — привязка атрибутов.
• v-on — слушатели событий.

Также можно создавать собственные директивы для повторно используемой логики управления DOM.

v-if: как это работает

v-if рендерит элемент только если выражение истинно. Когда выражение ложно, элемент НЕ присутствует в DOM.

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

• Когда элемент редко появляется/исчезает.
• Когда вставка/удаление элемента создаёт экономию ресурсов (например, тяжелые компоненты).

Пример (минимальный HTML + CDN для Vue 3). Обратите внимание: текстовые строки локализованы на русском.

  
  
  


  

    
{{ message1 }}
    
{{ message2 }}
  
  

Пример с переключением списка пользователей:

  
  
  


  

    

      

        
User1
        
User2
      
    
    Переключить пользователей
    
{{ message }}
  
  

В этом примере v-if полностью добавляет или удаляет блок с пользователями из DOM в зависимости от булевой переменной showUsers.

v-show: как это работает

v-show не удаляет элемент из DOM. Он переключает CSS-свойство display между “none” и исходным значением. Элемент остаётся в DOM, но может быть невидим.

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

• Когда переключения происходят часто.
• Когда важна сохранность состояния внутри элемента (например, значения формы внутри скрытого блока).

Пример:

  

    

      

        
User1
        
User2
      
    
    Переключить пользователей
    
{{ message }}
  
  

Важное: элемент с v-show присутствует в дереве DOM всегда, значит вычисления, наблюдатели и вложенные компоненты остаются активными.

Сравнение v-if и v-show

• DOM: v-if добавляет/удаляет элементы; v-show меняет видимость через CSS.
• Производительность: v-if выгоден при редких переключениях; v-show при частых.
• Сохранение состояния: v-show сохраняет состояние элементов, v-if — нет (если компонент размонтируется, его состояние теряется).
• Анимации: для анимаций появления/исчезания удобнее комбинировать v-if с компонентом .

Мини-эвристика:

• Частые переключения → v-show.
• Редкие переключения или тяжелая инициализация → v-if.

flowchart TD
  A[Нужно скрыть или показать элемент?] --> B{Часто ли меняется условие?}
  B -- Да --> C[v-show]
  B -- Нет --> D[v-if]
  C --> E[Сохраняет состояние в DOM]
  D --> F[Удаляет из DOM, экономит ресурсы]

Альтернативные подходы

1. Компьютед-значения (computed) для подготовки логики отображения. Это держит шаблон чистым и переносит сложную логику в вычисляемые свойства.
2. Динамические компоненты () для переключения между разными компонентами с управлением жизненного цикла.
3. Рендер-функции и JSX для условной логики, слишком сложной для шаблонов.
4. Фильтрация данных на уровне состояния (например, отфильтровать массив перед рендером), чтобы не рендерить элементы в v-for.

Пример использования computed для условия:

const app = Vue.createApp({
  data() {
    return { users: [], search: '' }
  },
  computed: {
    filteredUsers() {
      return this.users.filter(u => u.name.includes(this.search))
    },
    hasUsers() {
      return this.filteredUsers.length > 0
    }
  }
})

Затем в шаблоне использовать v-if=”hasUsers” или v-for по filteredUsers.

Когда директивы не подойдут

• Когда нужна серверная отрисовка (SSR) с разной логикой рендеринга: нужно учитывать различия между сервером и клиентом.
• Когда нужно полностью управлять жизненным циклом и состоянием компонентов при переключении — лучше динамические компоненты.
• Когда нужно отложенно загружать тяжелые компоненты — используйте асинхронные компоненты и ленивую загрузку.

Критерии приёмки и тестовые сценарии

Критерии приёмки:

• Элемент отображается при true и скрыт при false для v-show.
• Элемент присутствует в DOM только при true для v-if.
• Переключение состояния не вызывает утечек памяти (нет лишних слушателей).
• Для сложной логики используются computed или методы, шаблон остаётся читабельным.

Тестовые сценарии:

1. Инициализация: при showUsers = true блок и h1 видны; при false h1 скрыт (v-show) или блок отсутствует (v-if).
2. Повторное переключение 1000 раз: проверка на утечки памяти и деградацию производительности.
3. Сохранение состояния формы: заполнить поле внутри v-show-блока, скрыть и показать — значение должно сохраниться; при v-if — значение должно сброситься, если компонент размонтируется.
4. Анимации: при использовании проверять, что переходы срабатывают при v-if.

Чек-лист по ролям

Разработчик:

• Выбрал v-if или v-show по критериям частоты переключений.
• Перенёс сложную логику в computed/methods.
• Проверил работу с асинхронными компонентами.

QA:

• Протестировал переключения, проверил DOM и состояние.
• Замерил производительность на старых устройствах.

Архитектор:

• Убедился, что тяжелые компоненты загружаются лениво.
• Определил стандарты использования v-if/v-show в проекте.

Краткий справочник

• v-if — условно рендерит элемент; удаляет из DOM.
• v-else / v-else-if — ветвление для v-if.
• v-show — скрывает через CSS, оставляет в DOM.
• computed — вычисленные свойства для готовых условий.
• dynamic component — переключение компонентов через :is.

Контрпримеры и подводные камни

• Неправильно: использовать v-show для элемента с тяжелой инициализацией, который показывается редко — это тратит память.
• Неправильно: полагаться на v-if для сохранения состояния компонента (например, незаметные сбросы форм при размонтировании).
• Вмешательство в CSS: кастомные стили display могут конфликтовать с v-show.

Рекомендации по безопасности и приватности

Директивы управляют видимостью на клиенте; не используйте их для защиты приватных данных — скрытие через v-show/v-if не заменяет серверную авторизацию и фильтрацию данных. Всегда проверяйте права доступа на сервере.

Резюме

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