Оба условно отображают элемент, но делают это по-разному — v-if добавляет/удаляет элемент из DOM; v-show оставляет его в DOM и переключает CSS display.
<template>
<p v-if="isVisible">Rendered only when true (removed from DOM when false)</p>
<p v-show="isVisible">Always in the DOM; just display:none when false</p>
</template>
<!-- v-if="false" → the element doesn't exist at all -->
<!-- (nothing in the DOM) -->
<!-- v-show="false" → the element exists but is hidden -->
<p style="display: none">...</p>
v-if имеет более высокую стоимость переключения (создаёт/удаляет элементы и их компоненты, запускает lifecycle hooks каждый раз), но нулевую стоимость, когда условие false (ничего не отображается).v-show имеет более высокую начальную стоимость (всегда отображает, даже если скрыто), но дешёвое переключение (просто изменение CSS).Toggles often (tabs, dropdowns) → v-show (cheap to flip)
Rarely changes / may never render → v-if (skip rendering entirely)
Expensive content rarely shown → v-if (don't pay to build it)
<template>
<p v-if="status === 'loading'">Loading...</p>
<p v-else-if="status === 'error'">Error!</p>
<p v-else>Done</p>
</template>
v-if поддерживает цепочки v-else-if/v-else; v-show не поддерживает (переключает только один элемент).
v-show не работает на обёртках <template> (нет элемента для установки display); v-if работает.
Выбор правильного — это реальное решение о производительности: v-show для часто переключаемых вещей (DOM остаётся, переключение дешёво), v-if для условных/редких или дорогостоящих вещей (не отображайте их, пока они не понадобятся).
Неправильный выбор — например, v-show на тяжёлый контент, который обычно скрыт — растрачивает работу рендеринга.