Этот вопрос проверяет понимание условного рендеринга и работы с DOM во Vue.
v-if условно добавляет или удаляет элемент из DOM, а v-show лишь управляет его видимостью через CSS. При v-if компонент создаётся и уничтожается заново. v-show всегда оставляет элемент в DOM, меняя свойство display. Это влияет на производительность и поведение компонента. Выбор директивы зависит от сценария использования.
Во Vue существуют две основные директивы для условного отображения элементов — v-if и v-show. Они решают одну задачу, но работают по-разному.
v-if управляет существованием элемента в DOM.
Элемент создаётся только при выполнении условия
При смене условия элемент удаляется
Хуки жизненного цикла вызываются при каждом создании и уничтожении
Пример:
<div v-if="isVisible">
Контент
</div>
v-show управляет только отображением.
Элемент всегда присутствует в DOM
Меняется CSS-свойство display
Компонент создаётся один раз
Пример:
<div v-show="isVisible">
Контент
</div>
Работа с DOM
v-if добавляет и удаляет узлы
v-show скрывает и показывает узлы
Производительность
v-if дороже при частых переключениях
v-show дороже при начальной загрузке
Жизненный цикл
v-if повторно запускает хуки
v-show не влияет на жизненный цикл
v-if подходит для редко меняющихся условий, а v-show — для частого переключения видимости, когда важно сохранить компонент в DOM.