В чем разница v-if и v-show во Vue

Что проверяют

Понимаете ли вы, что за двумя похожими директивами стоят разные механизмы: одна управляет существованием узла и компонента, другая только его видимостью. Следом обычно спрашивают, что станет с состоянием дочернего компонента при переключении и можно ли совмещать v-if с v-for.

Как отвечать

Начните с механики, выводы о производительности из неё следуют сами:

• v-if: настоящий условный рендеринг. При ложном условии элемента в DOM нет, на его месте стоит комментарий-заглушка. Директива ленивая: если условие изначально ложно, ничего не рендерится и не монтируется. При переключении компонент уничтожается и создаётся заново, срабатывают onMounted и onUnmounted, локальное состояние теряется;
• v-show: элемент рендерится всегда, а директива переключает инлайновый display: none. Компонент остаётся смонтированным, его состояние и подписки живут;
• цена: у v-if дорогое переключение и дешёвый старт при ложном условии, у v-show наоборот. Отсюда правило: часто переключаемое (вкладки, выпадающее меню) через v-show, редко меняющееся или тяжёлое через v-if;
• ограничения v-show: не работает на <template> и не сочетается с v-else;
• v-if и v-for: во Vue 3 у v-if приоритет выше, поэтому условие не видит переменную цикла. Во Vue 2 было наоборот. Вешать их на один элемент не рекомендуется, фильтр лучше вынести в computed.

Если нужно и убрать компонент из DOM, и сохранить его состояние, назовите <KeepAlive>: он кеширует экземпляры при переключении динамических компонентов.

Где спотыкаются

Говорят, что v-if сбрасывает состояние «при каждом рендере». Сбрасывается оно только при смене условия, обычный перерендер родителя экземпляр не пересоздаёт.

Прячут через v-show тяжёлый блок, который пользователь может так и не открыть. Компонент всё равно смонтируется на старте, сделает запросы и займёт память.

Забывают про CSS: если в стилях элемента display задан с !important, инлайновый display: none от v-show его не перебьёт, и элемент не скроется.