Условия в шаблонах UI: v-if, ngIf и условный рендеринг

Вы когда-нибудь задумывались, почему кнопка исчезает из интерфейса, как только вы заполняете форму? Или почему список товаров становится пустым при выборе фильтра «нет в наличии»? За этим стоит условный рендеринг - механизм, который позволяет фронтенд-фреймворкам показывать или скрывать элементы на основе данных. Без него интерфейс превратился бы в статичную картинку, не реагирующую на действия пользователя.

В этой статье мы разберем, как работают директивы v-if во Vue.js и *ngIf в Angular, чем они отличаются от простого скрытия через CSS, и когда стоит использовать то или иное решение. Поехали.

Что такое условный рендеринг и зачем он нужен

Условный рендеринг is техника управления отображением DOM-элементов в зависимости от состояния приложения. Простыми словами: если условие истинно, элемент добавляется в дерево документов; если ложно - удаляется или остается скрытым.

Зачем это нужно? Представьте страницу личного кабинета. Пока пользователь не авторизован, ему видны кнопки «Войти» и «Регистрация». После входа эти кнопки должны исчезнуть, а вместо них появиться меню профиля и выход. Если просто спрятать старые кнопки с помощью CSS, они все равно останутся в памяти браузера, займут место в DOM и могут случайно сработаться при нажатии (например, через клавиатуру). Условный рендеринг решает эту проблему, полностью убирая ненужные узлы из интерфейса.

Директива v-if во Vue.js

Vue.js is прогрессивный JavaScript-фреймворк для создания пользовательских интерфейсов. В Vue.js основным инструментом для условного рендеринга является директива v-if. Она работает бинарно: либо элемент есть в DOM, либо его нет.

Синтаксис выглядит так:

<div v-if="isVisible">
  Этот блок виден только если isVisible === true
</div>

Когда значение переменной isVisible меняется, Vue автоматически пересчитывает виртуальный DOM и обновляет реальный. Важно понимать разницу между v-if и v-show:

• v-if: полностью удаляет элемент из DOM при ложном условии. Подходит для элементов, которые редко меняют состояние (например, модальные окна, формы логина).
• v-show: всегда держит элемент в DOM, но переключает CSS-стиль display: none. Лучше использовать, если элемент часто появляется и исчезает (например, таблица с данными, которая фильтруется).

Почему это важно? При частом переключении v-if браузер каждый раз создает и уничтожает узлы, что дороже по производительности, чем просто изменение стиля. Но если элемент сложный (с множеством дочерних компонентов), его полное удаление освобождает память и ускоряет работу приложения.

Директива *ngIf в Angular

Angular is платформа на TypeScript для построения динамических веб-приложений. В Angular аналогом v-if служит структурная директива *ngIf. Она также управляет наличием элемента в DOM.

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

<div *ngIf="userLoggedIn">
  Добро пожаловать, {{ username }}!
</div>

Под капотом *ngIf использует шаблон <ng-template>, который хранит разметку элемента. Когда условие становится истинным, Angular клонирует этот шаблон и вставляет в DOM. Когда ложно - удаляет.

Особенность Angular заключается в системе детекции изменений (Change Detection). Каждый раз, когда данные компонента меняются, фреймворк проверяет, изменились ли условия в директивах. Это может приводить к лишним проверкам, если у вас сложное дерево компонентов. Поэтому опытные разработчики иногда оптимизируют логику, вынося сложные условия в геттеры или методы, чтобы избежать лишних вычислений.

Сравнение подходов: Vue vs Angular

Оба фреймворка решают одну и ту же задачу, но делают это по-разному. Vue.js делает ставку на простоту и интуитивность: вы пишете v-if, и все работает. Angular предлагает больше контроля, но и больше ответственности за оптимизацию.

Типичные ошибки и как их избежать

Даже опытные разработчики иногда совершают ошибки при работе с условным рендерингом. Вот три самые частые:

1. Использование v-if/v-show там, где нужен v-for. Иногда хочется показать список, если массив не пуст. Но лучше обернуть весь контейнер списка в v-if="list.length > 0", а внутри использовать v-for. Так вы избежите рендеринга пустого обертки.
2. Сложные выражения прямо в директиве. Вместо v-if="calculateExpensiveValue() && checkPermission()" лучше вынести логику в computed-проп (в Vue) или метод/геттер (в Angular). Это улучшает читаемость и производительность.
3. Забытый else-блок. Если вы хотите показать один элемент при одном условии, а другой - при противоположном, используйте v-else или v-else-if. Иначе оба элемента могут оказаться в DOM одновременно или ни одного.

Когда выбирать v-if, а когда v-show (или аналоги)

Выбор зависит от контекста. Вот простое правило:

• Используйте v-if / *ngIf, если элемент тяжелый (много дочерних узлов, скрипты, изображения) и редко меняется. Пример: форма регистрации, которая открывается один раз.
• Используйте v-show / [style.display], если элемент легкий и часто переключается. Пример: выпадающее меню, которое открывается по клику.

Есть еще один нюанс: анимации. Если вы хотите плавно показывать/скрывать элемент, в Vue.js можно использовать компонент <transition> вместе с v-if. В Angular для этого используются встроенные анимационные модули. Без анимаций резкое появление/исчезновение может раздражать пользователя.

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

Представьте интернет-магазин. Есть список товаров и чекбокс «Показывать только доступные». Как реализовать?

Вариант 1 (через v-if):

<div v-for="product in filteredProducts" :key="product.id">
  {{ product.name }}
</div>

Здесь filteredProducts - это computed-проп, который возвращает новый массив на основе исходного и состояния чекбокса. Сам список всегда рендерится, но содержит разные данные. Это эффективно, потому что DOM-узлы не создаются заново, а просто обновляются.

Вариант 2 (через v-if на каждом элементе):

<div v-for="product in allProducts" :key="product.id" v-if="showOnlyAvailable ? product.available : true">
  {{ product.name }}
</div>

Этот вариант хуже, потому что при каждом изменении чекбокса Vue будет создавать и удалять отдельные DOM-узлы. Первый вариант предпочтительнее, так как он оперирует данными, а не разметкой.

Частые вопросы