> В чем разница v-if и v-show во Vue (Vue.js)

Основное различие между v-if и v-show в Vue.js заключается в механизме управления отображением элементов.

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

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

Практические рекомендации:

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

• Используйте v-show, если требуется частое переключение видимости (например, анимации, выпадающие списки, тултипы).

Пример:

<template>
  <div>
    <p v-if="isLogged">Добро пожаловать!</p> <!-- Удаляется из DOM при isLogged = false -->
    <p v-show="isVisible">Этот текст всегда в DOM</p> <!-- Просто скрывается -->
  </div>
</template>